Tengo una carga de divs con la clase testimonial
y 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?
Tengo una carga de divs con la clase testimonial
y 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:
Use cada uno: ' i
' es la posición en la matriz, obj
es 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.
false
se detendrá la iteración.
$(this)
acceder al objeto ... obj
ser un objeto DOM no permite adjuntar funciones directamente, por ejemploobj.empty()
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){
}
});
break;
no se romperá. Debe usarreturn false;
Es bastante simple hacer esto sin jQuery en estos días.
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
});
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 divs
que tiene data-index
más que 2
entonces, necesitamos este jquery.
$('div[class="testimonial"]').each(function(index,item){
if(parseInt($(item).data('index'))>2){
$(item).html('Testimonial '+(index+1)+' by each loop');
}
});
puedes hacerlo de esta manera
$('.testimonial').each(function(index, obj){
//you can use this to access the current item
});
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
}
divs = $('.testimonial')
for(ind in divs){
div = divs[ind];
//do whatever you want
}
$(ind)
.
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');
}
Sin jQuery actualizado
document.querySelectorAll('.testimonial').forEach(function (element, index) {
element.innerHTML = 'Testimonial ' + (index + 1);
});
<div class="testimonial"></div>
<div class="testimonial"></div>
Puede que me falte parte de la pregunta, pero creo que simplemente puedes hacer esto:
$('.testimonial').each((index, element) => {
if (/* Condition */) {
// Do Something
}
});
Esto utiliza cada método de jQuery: https://learn.jquery.com/using-jquery-core/iterating/
Más preciso:
$.each($('.testimonal'), function(index, value) {
console.log(index + ':' + value);
});
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>
doc..torAll.forEach()
sería suficiente?
[...ArrayLike]
se usó por el tiempo que querySelectorAll no tenía soporte para .forEach
. @aabbccsmith
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
}
});