jQuery pour parcourir les éléments avec la même classe

582

J'ai une charge de divs avec la classe testimonialet je veux utiliser jquery pour les parcourir pour vérifier chaque div si une condition spécifique est vraie. S'il est vrai, il doit effectuer une action.

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

geoffs3310
la source

Réponses:

1052

Utilisez chacun: ' i' est la position dans le tableau, objest l'objet DOM que vous itérez (est également accessible via le wrapper jQuery $(this)).

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

Vérifiez la référence de l' API pour plus d'informations.

Kees C. Bakker
la source
2
La fonction avec les paramètres i, obj aide beaucoup. Si seulement chacun était utilisé, ce n'était pas une itération.
darwindeeds
2
@ Darwindeeds correct! La fonction est utilisée par l'itérateur réel pour traiter chaque élément. Le retour falsearrêtera l'itération.
Kees C. Bakker
138
Il convient de souligner que "obj" sera l'objet dom, tandis que $ (this) est l'objet jQuery.
AndreasT
Cant we do jQuery (this 'ul li') length to get length of that elements ul li?
techie_28
16
+1 pour avoir suggéré $(this)d'accéder à l'objet ... objêtre un objet DOM ne permet pas d'attacher directement des fonctions par exempleobj.empty()
Fr0zenFyr
127

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){

    }


 });
stephen776
la source
4
FYI: break;ne cassera pas. Vous devez utiliserreturn false;
Kolob Canyon
53

C'est assez simple de le faire sans jQuery de nos jours.

Sans jQuery:

Sélectionnez simplement les éléments et utilisez la .forEach()méthode pour les parcourir:

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

Dans les anciens navigateurs:

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

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 à ceux divsqui ont data-indexplus que cela, 2nous 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 de violon

Manoj
la source
29

vous pouvez le faire de cette façon

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

.eq () de jQuery 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
}
Atharva
la source
1
c'est l'approche la plus efficace.
Amin Setayeshfar
17
divs  = $('.testimonial')
for(ind in divs){
  div = divs[ind];
  //do whatever you want
}
ikostia
la source
cela ne vous donne cependant pas les objets jquery, juste des éléments dom
celwell
1
@celwell ne peut pas s'attendre à ce que jQuery fasse tout pour vous. Il s'agit de créer votre propre objet jQuery $(ind).
GoldBishop
14

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

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

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');
}
Ismail Rubad
la source
8

Sans jQuery mis à jour

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

KrisInception
la source
presque la même réponse est déjà là, je pense que vous devriez modifier l'existant
Oleh Rybalchenko
6
$('.testimonal').each(function(i,v){
  if (condition) {
    doSomething();
  }
});
davin
la source
4

Plus précis:

$.each($('.testimonal'), function(index, value) { 
    console.log(index + ':' + value); 
});
Atif Tariq
la source
C'est bien si vous aimez lire / écrire dans une perspective plus fonctionnelle.
Sgnl
4

En JavaScript ES6 .forEach () sur une collection NodeList de type tableau donnée parElement.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>

Roko C. Buljan
la source
L'opérateur étalé + la notation de tableau n'est pas nécessaire, cela doc..torAll.forEach()suffirait sûrement ?
aabbccsmith
Je vous remercie. Absolument. [...ArrayLike]a été utilisé pour le temps que querySelectorAll n'a pas pris en charge .forEach. @aabbccsmith
Roko C. Buljan
2

Vous pouvez utiliser la méthode jQuery $ each pour parcourir tous les éléments avec le témoignage de classe. i => est l'indice de l'élément dans la collection et val vous donne l'objet de cet élément particulier et vous pouvez utiliser "val" pour accéder davantage aux propriétés de votre élément et vérifier votre condition.

$.each($('.testimonal'), function(i, val) { 
    if(your condition){
       //your action
    }
});
Nidhi Gupta
la source