jQuery para recorrer elementos con la misma clase
Tengo un montón de divs con la clase testimonialy quiero usar jquery para recorrerlos y verificar en cada div si una condición específica es verdadera. Si es cierto, debería realizar una acción.
¿Alguien sabe cómo haría esto?
Utilice cada uno: ' i' es la posición en la matriz, objes el objeto DOM que está iterando ( $(this)también se puede acceder a través del contenedor jQuery).
$('.testimonial').each(function(i, obj) {
//test
});
Consulte la referencia de la API para obtener más información.
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){
}
});
Es bastante sencillo hacer esto sin jQuery hoy en día.
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 más antiguos:
var testimonials = document.querySelectorAll('.testimonial');
Array.prototype.forEach.call(testimonials, function(element, index) {
// conditional logic here.. access element
});
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 aquellos divsque tienen data-indexmayor 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 de violín