web-dev-qa-db-fra.com

jQuery pour parcourir des éléments de même classe

J'ai une charge de divs avec la classe testimonial et je veux utiliser jQuery pour les parcourir en boucle afin de vérifier pour chaque div si une condition spécifique est vraie. Si c'est vrai, il devrait exécuter une action.

Est-ce que quelqu'un sait comment je ferais cela?

javascriptjqueryjquery-selectors
517
geoffs3310

Utilisez chaque élément: 'i' est la position dans le tableau, obj est l'objet DOM que vous êtes en train d'itérer (accessible également via l'encapsuleur jQuery $(this)).

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

Vérifiez le référence d'api pour plus d'informations.

934
Kees C. Bakker

essaye ça...

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


    if(condition){

    }


 });
112
stephen776

C'est assez simple de faire cela sans jQuery ces jours-ci.

Sans jQuery:

Il suffit de sélectionner les éléments et d'utiliser la méthode .forEach() pour les parcourir:

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

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>

Lorsque nous voulons accéder à ces divs qui a data-index supérieur à 2, nous avons besoin de cette requête.

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

Exemple de travail avec violon

40
Manoj

vous pouvez le faire de cette façon

$('.testimonial').each(function(index, obj){
    //you can use this to access the current item
});
27
Ghyath Serhal
divs  = $('.testimonial')
for(ind in divs){
  div = divs[ind];
  //do whatever you want
}
17
ikostia

.eq () de jQuery peut vous aider à parcourir des é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
}
14
Atharva

Vous pouvez le faire de manière concise en utilisant .filter . L'exemple suivant cachera tous les divs .testimonial contenant le mot "quelque chose":

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

Avec une simple boucle for:

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

Il se peut que je manque une partie de la question, mais je crois que vous pouvez simplement faire ceci:

$('.testimonial').each((index, element) => {
    if (/* Condition */) {
        // Do Something
    }
});

Cela utilise chaque méthode de jQuery: https://learn.jquery.com/using-jquery-core/iterating/

8
David Smith

sans jQuery mis à jour

document.querySelectorAll('.testimonial').forEach(function (element, index) {
    element.innerHTML = 'Testimonial ' + (index + 1);
});
<div class="testimonial"></div>
<div class="testimonial"></div>
7
KrisInception
$('.testimonal').each(function(i,v){
  if (condition) {
    doSomething();
  }
});
6
davin

Plus précis:

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

En JavaScript ES6 . ForEach () sur un semblable à un tableau - NodeList collection donnée par Element.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>
2
Roko C. Buljan