jQuery pour faire une boucle à travers des éléments avec la même classe
j'ai une charge de divs avec la classe testimonial
et je veux utiliser jquery pour faire une boucle à travers eux, à vérifier pour chaque div si une condition est vraie. Si c'est vrai, il doit effectuer une action.
est-ce que quelqu'un sait comment je ferais ça?
14 réponses
utilisez chaque: ' i
' est la position dans le tableau, obj
est l'objet DOM que vous itérez (peut être accédé par le jquery wrapper $(this)
ainsi).
$('.testimonial').each(function(i, obj) {
//test
});
cochez la case référence api pour plus d'information.
essayez ceci...
$('.testimonial').each(function(){
//if statement here
// use $(this) to reference the current div in the loop
//you can try something like...
if(condition){
}
});
c'est assez simple de faire ça sans jQuery ces jours-ci.
sans jQuery:
il suffit de sélectionner les éléments et d'utiliser la .forEach()
méthode pour itérer sur eux:
var testimonials = document.querySelectorAll('.testimonial');
Array.prototype.forEach.call(testimonials, function(elements, index) {
// conditional here.. access elements
});
essayez cet exemple
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>
quand nous voulons accéder à ces divs
qui ont data-index
plus grand que 2
alors nous avons besoin de ce jquery.
$('div[class="testimonial"]').each(function(index,item){
if(parseInt($(item).data('index'))>2){
$(item).html('Testimonial '+(index+1)+' by each loop');
}
});
, vous pouvez le faire de cette façon
$('.testimonial').each(function(index, obj){
//you can use this to access the current item
});
divs = $('.testimonial')
for(ind in divs){
div = divs[ind];
//do whatever you want
}
vous pouvez le faire de manière concise en utilisant .filter
. L'exemple suivant permet de masquer tous .divs testimonial contenant le mot "something":
$(".testimonial").filter(function() {
return $(this).text().toLowerCase().indexOf("something") !== -1;
}).hide();
jQuery .eq () peut vous aider à parcourir les éléments avec une approche indexée.
var testimonialElements = $(".testimonial");
for(var i=0; i<testimonialElements.length; i++){
var element = testimonialElements.eq(i);
//do something with element
}
il se peut que je manque une partie de la question, mais je crois que vous pouvez simplement faire ceci:
$('.testimonial').each(function() {
if(...Condition...) {
...Do Stuff...
}
}
avec un simple pour boucle:
var testimonials= $('.testimonial');
for (var i = 0; i < testimonials.length; i++) {
// Using $() to re-wrap the element.
$(testimonials[i]).text('a');
}
sans jQuery mise à jour
document.querySelectorAll('.testimonial').forEach(function (element, index) {
element.innerHTML = 'Testimonial ' + (index + 1);
});
<div class="testimonial"></div>
<div class="testimonial"></div>
$('.testimonal').each(function(i,v){
if (condition) {
doSomething();
}
});
plus précis:
$.each($('.testimonal'), function(index, value) {
console.log(index + ':' + value);
});
en JavaScript ES6 en utilisant spread ...
operator
[...document.querySelectorAll('.testimonial')].forEach( el => {
el.style.color = 'red';
});
plus d'un tableau "comme de la 151970920" collection Element.querySelectorAll()
[...document.querySelectorAll('.testimonial')].forEach( el => {
el.style.color = 'red';
const stuff = `Element ${el.tagName} with ID #${el.id} says: ${el.textContent}`;
console.log( stuff );
});
<p class="testimonial" id="1">This is some text</p>
<div class="testimonial" id="2">Lorem ipsum</div>