Perché iterare su oggetti jQuery con .each() non mi fornisce oggetti jQuery?

Question

I seguenti lavori come previsto:

$(".foo").first().text("hi!") 

... perché first() restituisce un oggetto jQuery.

Tuttavia, se voglio lavorare con il metodo text() per tutte le partite, ho bisogno di fare:

$(".foo").each(function(idx, obj) { 
    $(obj).text("hi!") 
    } 
) 

... perché ti dà each() oggetti DOM.

Qual è la ragione di progettazione dietro questa sconcertante differenza? Come posso evitare di dover creare un oggetto jQuery per ogni abbinamento?

Answer 1

Forse a causa di motivi di prestazioni relative al ciclo su grandi collezioni? Se hai solo bisogno degli oggetti DOM, allora salvi i cicli. Se ti serve l'oggetto jQuery, puoi facilmente ottenerlo.

In genere non fornisco il 2 ° parametro a ciascuno, quindi posso utilizzare $ (questo).

Answer 2

Hai visto .each vs jQuery.each

Si dovrebbe essere in grado di effettuare le seguenti operazioni:

$('li').each(function(index) { 
    alert(index + ': ' + $(this).text()); 
}); 

per il primo collegamento. Prova $(this) invece di $(obj)

Answer 3

Prova

$(".foo").each(function(idx, obj) { 
    $(this).text("hi!") 
    } 
) 

Answer 4

Credo che dal momento che jQuery utilizza gli oggetti wrapper, il primo metodo utilizza il wrapper originale e rimuove tutto tranne il primo elemento nel wrapper, mantenendolo quindi come un oggetto jQuery.

Tuttavia, se fossero ad alimentare in un oggetto jQuery per ciascuno dei nodi per la funzione each(), sarebbero incorrere che sovraccarico di creare l'involucro per ciascuno. E dal momento che non vuoi necessariamente quell'oggetto wrapper, ciò comporterebbe un sovraccarico non necessario.

Answer 5

Internamente jQuery chiamare questo per $("sel").each(function(){});

if (isObj) { 
    for (name in object) { 
     if (callback.call(object[ name ], name, object[ name ]) === false) { 
      break; 
     } 
    } 
} 

E il eq è una fetta semplice:

eq: function(i) { 
    return i === -1 ? 
    this.slice(i) : 
    this.slice(i, +i + 1); 
} 

Così si può creare una nuova each funzione che invece di object[name] farà un object:eq(i)

$("*").slice(1,2).toSource() == $("*").eq(1).toSource(); 

Quindi, per creare il proprio each:

$.fn.each2 = function(callback) 
{ 
    for (var i = 0; i < this.length; ++i) { 
     callback.call(this.eq(i), i, this.eq(i)) 
    } 
}; 

$("*").each2(function(i, obj) { 
    alert(obj); // now obj is a jQuery object 
}); 

---

Sembra che each3 è più veloce di each2http://www.jsfiddle.net/m7pKk/2/

$.fn.each2 = function(callback) 
{ 
    for (var i = 0; i < this.length; ++i) { 
     var jObj = this.eq(i); 
     callback.call(jObj, i, jObj) 
    } 
}; 

$.fn.each3 = function(callback) 
{ 
    for (var i = 0; i < this.length; ++i) { 
     var jObj = $(this[i]); 
     callback.call(jObj, i, jObj) 
    } 
}; 

See this example on jsFiddle with performance measurement.

Answer 6

C'è il colpo ovvio prestazioni che sarebbe prese per iterazione. La creazione di un nuovo oggetto jQuery ogni iterazione sarebbe molto più lenta e probabilmente rilevabile su raccolte di grandi dimensioni. Molto spesso, non è necessaria la comodità aggiuntiva dell'oggetto avvolto, specialmente quando si accede a singoli attributi o proprietà. Troppo spesso si vede codice sprecare ciclo come $(this).is(":checked") invece di this.checked.

A parte questo, tuttavia, direi che è perché ha senso. Un oggetto jQuery rappresenta in genere una raccolta di oggetti DOM che può avere un numero qualsiasi di dimensioni. Talvolta jQuery viene utilizzato esclusivamente per il suo supporto per i selettori e per l'associazione degli eventi e non molto oltre. Non ha molto senso restituire una raccolta contenente un singolo elemento durante l'iterazione su una raccolta di più elementi. Ha molto più senso restituire un singolo elemento di cui è più probabile che sia necessario, l'elemento DOM, quindi puoi aggiungerlo con jQuery se desideri le funzionalità aggiunte. Questo inoltre lo mantiene in linea con l'iterazione su NodeList e altri tipi di raccolta.

Answer 7

Probabilmente perché, nel tuo esempio, non c'è motivo di utilizzare anche each. Invece di:

$(".foo").each(function(idx, obj) { 
    $(obj).text("hi!"); 
) 

Basta usare:

$(".foo").text("hi!"); 

Tutto è automaticamente plurale quando si tratta di set di jQuery.