¿Por qué la iteración sobre objetos jQuery con .each() no me da objetos jQuery?

Question

las siguientes obras: como se esperaba

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

... porque first() devuelve un objeto jQuery.

Sin embargo, si quiero trabajar con el método text() para todos los partidos, que tengo que hacer:

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

... porque te da each() objetos DOM.

¿Cuál es el motivo del diseño detrás de esta desconcertante diferencia? ¿Cómo puedo evitar tener que crear un objeto jQuery para cada coincidencia?

Answer 1

Posiblemente debido a problemas de rendimiento relacionados con el bucle más grandes colecciones? Si solo necesita los objetos DOM, entonces guarda ciclos. Si necesita el objeto jQuery, puede obtenerlo fácilmente.

Normalmente no proporciono el 2º parámetro para cada uno, así que puedo usar $ (esto).

Answer 2

¿Vio usted .each vs jQuery.each

Usted debe ser capaz de hacer lo siguiente:

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

por el primer enlace. Trate $(this) en lugar de $(obj)

Answer 3

tratan

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

Answer 4

Creo que, dado que jQuery usa objetos de envoltura, el primer método usa el envoltorio original, y simplemente elimina todos menos el primer elemento del envoltorio, manteniéndolo así como un objeto jQuery.

Sin embargo, si tuvieran que alimentar un objeto jQuery para cada uno de los nodos para la función each(), incurrirían en la sobrecarga de crear el contenedor para cada uno. Y dado que no necesariamente quiere ese objeto envoltorio, incurriría en una sobrecarga innecesaria.

Answer 5

Internamente jQuery llamar a esto para $("sel").each(function(){});

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

Y el eq es una rebanada simple:

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

Así se puede crear una nueva función each que en lugar de object[name] hará un object:eq(i)

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

Así que para crear su propio 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 
}); 

---

Parece que each3 es más rápido que 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

Ahí está el impacto en el rendimiento obvio que sería tomado por iteración. Al crear un nuevo objeto jQuery cada iteración sería mucho más lenta y probablemente notable en colecciones grandes. Muy a menudo, no necesita la conveniencia adicional del objeto envuelto, especialmente al acceder a propiedades o atributos individuales. Con demasiada frecuencia, ve el código de pérdida de ciclo como $(this).is(":checked") en lugar de this.checked.

Aparte de eso, sin embargo, diría que es porque tiene sentido. Un objeto jQuery típicamente representa una colección de objetos DOM que pueden tener cualquier número de tamaño. A veces, jQuery se usa exclusivamente para su soporte de selector y enlace de eventos, y no mucho más allá de eso. No tiene mucho sentido devolver una colección que contenga un elemento único al iterar sobre una colección de más elementos. Tiene mucho más sentido devolver un elemento individual que es más probable que necesite, el elemento DOM, luego puede envolverlo con jQuery si desea las características adicionales. Esto también lo mantiene en línea con iterar sobre NodeList y otros tipos de colección.

Answer 7

Probablemente porque, en su ejemplo, no hay ninguna razón para usar incluso each. En lugar de:

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

sólo tiene que utilizar:

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

Todo es automáticamente plural cuando se trata de conjuntos de jQuery.