jQuery para recorrer elementos con la misma clase


582

Tengo una carga de divs con la clase testimonialy quiero usar jquery para recorrerlos para verificar cada div si una condición específica es verdadera. Si es cierto, debe realizar una acción.

¿Alguien sabe cómo haría esto?

Respuestas:


1052

Use cada uno: ' i' es la posición en la matriz, objes el objeto DOM que está iterando (también se puede acceder a través del contenedor jQuery $(this)).

$('.testimonial').each(function(i, obj) {
    //test
});

Consulte la referencia de la API para obtener más información.


2
La función con los parámetros i, obj ayuda mucho. Si solo se utilizó cada uno, entonces no estaba iterando.
darwindeeds

2
@Darwindeeds correcto! El iterador real utiliza la función para procesar cada elemento. Al regresar falsese detendrá la iteración.
Kees C. Bakker

138
Vale la pena señalar que "obj" será el objeto dom, mientras que $ (este) es el objeto jQuery.
AndreasT

No podemos hacer jQuery (este 'ul li'). Longitud para obtener la longitud de esos elementos ul li?
techie_28

16
+1 por sugerir $(this)acceder al objeto ... objser un objeto DOM no permite adjuntar funciones directamente, por ejemploobj.empty()
Fr0zenFyr

127

prueba esto...

$('.testimonial').each(function(){
    //if statement here 
    // use $(this) to reference the current div in the loop
    //you can try something like...


    if(condition){

    }


 });

44
FYI: break;no se romperá. Debe usarreturn false;
Kolob Canyon

53

Es bastante simple hacer esto sin jQuery en estos días.

Sin jQuery:

Simplemente seleccione los elementos y use el .forEach()método para iterar sobre ellos:

const elements = document.querySelectorAll('.testimonial');
Array.from(elements).forEach((element, index) => {
  // conditional logic here.. access element
});

En navegadores antiguos:

var testimonials = document.querySelectorAll('.testimonial');
Array.prototype.forEach.call(testimonials, function(element, index) {
  // conditional logic here.. access element
});

42

Prueba este ejemplo

HTML

<div class="testimonial" data-index="1">
    Testimonial 1
</div>
<div class="testimonial" data-index="2">
    Testimonial 2
</div>
<div class="testimonial" data-index="3">
    Testimonial 3
</div>
<div class="testimonial" data-index="4">
    Testimonial 4
</div>
<div class="testimonial" data-index="5">
    Testimonial 5
</div>

Cuando queremos acceder a los divsque tiene data-indexmás que 2entonces, necesitamos este jquery.

$('div[class="testimonial"]').each(function(index,item){
    if(parseInt($(item).data('index'))>2){
        $(item).html('Testimonial '+(index+1)+' by each loop');
    }
});

Ejemplo de trabajo violín


29

puedes hacerlo de esta manera

$('.testimonial').each(function(index, obj){
    //you can use this to access the current item
});

18

El .eq () de jQuery puede ayudarlo a atravesar elementos con un enfoque indexado.

var testimonialElements = $(".testimonial");
for(var i=0; i<testimonialElements.length; i++){
    var element = testimonialElements.eq(i);
    //do something with element
}

1
Este es el enfoque más eficiente.
Amin Setayeshfar

17
divs  = $('.testimonial')
for(ind in divs){
  div = divs[ind];
  //do whatever you want
}

eso no te da los objetos jquery, solo elementos dom
celwell

1
@celwell no puede esperar que jQuery haga todo por usted. Se trata de hacer su propio objeto jQuery $(ind).
GoldBishop

14

Puedes hacer esto de manera concisa usando .filter. El siguiente ejemplo ocultará todos los div .testimoniales que contengan la palabra "algo":

$(".testimonial").filter(function() {
    return $(this).text().toLowerCase().indexOf("something") !== -1;
}).hide();

10

Con un simple for loop:

var testimonials= $('.testimonial');
for (var i = 0; i < testimonials.length; i++) {
  // Using $() to re-wrap the element.
  $(testimonials[i]).text('a');
}

8

Sin jQuery actualizado

document.querySelectorAll('.testimonial').forEach(function (element, index) {
    element.innerHTML = 'Testimonial ' + (index + 1);
});
<div class="testimonial"></div>
<div class="testimonial"></div>


casi la misma respuesta ya está aquí, creo que deberías editar las existentes
Oleh Rybalchenko


6
$('.testimonal').each(function(i,v){
  if (condition) {
    doSomething();
  }
});

4

Más preciso:

$.each($('.testimonal'), function(index, value) { 
    console.log(index + ':' + value); 
});

Esto es bueno si te gusta leer / escribir desde una perspectiva más funcional.
Sgnl

4

En JavaScript ES6 .forEach () a través de una matriz similar a NodeList colección dada porElement.querySelectorAll()

document.querySelectorAll('.testimonial').forEach( el => {
  el.style.color = 'red';
  console.log( `Element ${el.tagName} with ID #${el.id} says: ${el.textContent}` );
});
<p class="testimonial" id="1">This is some text</p>
<div class="testimonial" id="2">Lorem ipsum</div>


La notación de operador extendido + matriz no es necesaria, ¿seguramente doc..torAll.forEach()sería suficiente?
aabbccsmith

Gracias. Absolutamente. [...ArrayLike]se usó por el tiempo que querySelectorAll no tenía soporte para .forEach. @aabbccsmith
Roko C. Buljan

2

Puede usar el método jQuery $ each para recorrer todos los elementos con un testimonio de clase. i => es el índice del elemento en la colección y val le da el objeto de ese elemento en particular y puede usar "val" para acceder aún más a las propiedades de su elemento y verificar su condición.

$.each($('.testimonal'), function(i, val) { 
    if(your condition){
       //your action
    }
});
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.