Simplifique las variables jQuery en una función en bucle

Soy bastante nuevo en jQuery y estoy tratando de encontrar la forma más práctica de resolver mi problema. Actualmente lo que tengo funciona, sin embargo sé que podría simplificarlo y hacerlo más práctico. No estoy seguro de cómo hacerlo.

Así que aquí está mi jQuery...

var hl1 = data.headlines[0,0].headline;
var hl2 = data.headlines[0,1].headline;
var hl3 = data.headlines[0,2].headline;
var hl4 = data.headlines[0,3].headline;
var hl5 = data.headlines[0,4].headline;
var hl6 = data.headlines[0,5].headline;
var hl7 = data.headlines[0,6].headline;
var hl8 = data.headlines[0,7].headline;
var hl9 = data.headlines[0,8].headline;
var hl10 = data.headlines[0,9].headline;

$('#headlines .title').eq(0).append(hl1);
$('#headlines .title').eq(1).append(hl2);
$('#headlines .title').eq(2).append(hl3);
$('#headlines .title').eq(3).append(hl4);
$('#headlines .title').eq(4).append(hl5);
$('#headlines .title').eq(5).append(hl6);
$('#headlines .title').eq(6).append(hl7);
$('#headlines .title').eq(7).append(hl8);
$('#headlines .title').eq(8).append(hl9);
$('#headlines .title').eq(9).append(hl10);

Y aquí está mi HTML...

<div id="headlines">
   <h2 class="title"></h2>
   <h2 class="title"></h2>
   <h2 class="title"></h2>
   <h2 class="title"></h2>
   <h2 class="title"></h2>
   <h2 class="title"></h2>
   <h2 class="title"></h2>
   <h2 class="title"></h2>
</div>

Entonces, básicamente, lo que estoy haciendo es extraer algunos datos a través de AJAX/JSON y agregarlos a estas etiquetas h2. Esto funciona de la manera que quiero, sin embargo, siento que esto podría comprimirse en una función, pero no estoy muy seguro de cómo llegar allí. Cualquier ejemplo o ayuda descriptiva sería muy apreciada. Gracias..

preguntado el 04 de julio de 12 a las 01:07

1 Respuestas

Con la buena moda for bucle:

var titles = $('#headlines .title');
for (var i=0; i<titles.length; i++)
    titles.eq(i).append(data.headlines[0,i].headline);

Explicado:
for es la forma más básica de iteración de Javascript.

Primero estoy almacenando en caché el $('#headlines .title') Selector de jQuery en el titles var, de esta manera puedo acceder a todos los elementos coincidentes por el $('#headlines .title') selector sin tener que crear un nuevo objeto jQuery para cada iteración, lo que proporciona un buen aumento de rendimiento.

A continuación, itero a través de todos los elementos coincidentes, es decir, desde el índice 0 (primer elemento) hasta el último elemento (es decir, titles.length-1, como índice es Basado en 0). La i<titles.length la parte seria igual i<=titles.length-1 Como estoy usando números enteros, elegí el que se ve más ordenado y tiene un mejor rendimiento.

Tenga en cuenta que los objetos jQuery' .length propiedad devuelve el mismo valor que la .size() método, pero .length se prefiere porque no tiene la sobrecarga de una llamada de función, según documentación.

El resto de esta parte se explica por sí mismo, el .eq() método filtra el titles selector devolviendo solo el elemento con el índice que estoy iterando en este momento, de esta manera puedo agregar el data.headlines con el mismo índice que con el data.headlines[0,i].headline.

O con jQuery .each iteración:

$('#headlines .title').each(function(i) {
    $(this).append(data.headlines[0,i].headline);
}

El .each El método jQuery también se explica por sí mismo, tomado del sitio API jQuery:

Descripción Itere sobre un objeto jQuery, ejecutando una función para cada elemento coincidente.

Así que creo un conjunto de elementos DOM con el $('#headlines .title') e iterar a través de ellos con el .each. La función pasada como parámetro se ejecutará para cada elemento que coincida con el selector, por lo tanto, creo un objeto jQuery con el elemento actual en la iteración: $(this) - y añádale el índice de titulares correspondiente. .eachEl índice de está basado en 0, así como prácticamente todas las estructuras de matriz indexadas (similares) en JS.

Respondido 04 Jul 12, 02:07

Esto funciona perfectamente, gracias... Sin embargo, una solicitud más. Entiendo de dónde proviene la mayor parte de esto, pero ¿me importaría desglosar/explicarme la lógica de cada uno? - kris hollenbeck

No hay mucha lógica, pero haré lo mejor que pueda. Dame un par de minutos para escribir las explicaciones. :) - fabricio matte

@KrisHollenbeck Hice 2 explicaciones, espero no haber complicado demasiado las cosas. A veces tengo la mala costumbre de explicar las cosas con demasiado detalle, solo diga si necesita una explicación de un área específica del código, método o declaración. =] - fabricio matte

Mate... Es bastante claro. Buena explicación. Eres de mucha ayuda. Gracias. Esto es algo que necesito hacer con bastante frecuencia, así que haré referencia a esta publicación si alguna vez olvido cómo hacerlo. - kris hollenbeck

@KrisHollenbeck Sí, Wikipedia también tiene una buena página sobre para bucles (Javascript usa estilo C for loops, como también puede notar en mi enlace de MDN en la respuesta), la iteración es sin duda el brazo derecho de cualquier programador/desarrollador y aprovecharla brinda un gran beneficio, haciendo que su código sea más limpio, más conciso y mucho más fácil de mantener. - fabricio matte

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.