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.

Personne ne sait comment je pourrais faire cela?

InformationsquelleAutor geoffs3310 | 2011-01-19

920

Utilisation de chacun: 'i' est la position dans le tableau, obj est l'objet DOM que vous êtes itération (peut être accédé par le biais du jQuery wrapper $(this) ainsi).
```
$('.testimonial').each(function(i, obj) {
    //test
});
```
Vérifier la référence de l'api pour plus d'informations.
- La fonction i, obj paramètres, aide beaucoup. Si seulement chacun a été utilisé alors qu'il n'était pas de l'itération.
- correct! La fonction est utilisée par l'itérateur pour traiter chaque élément. De retour false va arrêter l'itération.
- Il est intéressant de souligner, que "obj" sera l'objet dom, alors $(this) est l'objet jQuery.
- Cant nous n'jQuery(ce "ul li").la longueur pour obtenir la longueur de ce que les éléments ul li?
- $(this).find ("ul li").longueur vous donnera le nombre de li qui sont dans tous les ul dans le champ d'application actuel.
- Vous pouvez toujours consulter l'api: api.jquery.com
- J'aime cette approche, car la boucle est dans un autre champ d'application (fonction), donc il n'y a pas de i variable après cette boucle. Les noms de variables peuvent être ré-utilisé/l'ombre à l'intérieur de la boucle sans casser quoi que ce soit à l'extérieur.
- +1 pour ce qui suggère $(this) pour accéder à l'objet... obj être objet DOM ne permet pas de joindre directement les fonctions par exemple obj.empty()
- Intéressant de noter que l' $.chaque('.témoignage', function(i, obj) { // faire quelque chose } n'est PAS la même chose et probablement un "Uncaught TypeError: Impossible d'utiliser un 'dans' l'opérateur de la recherche pour" erreur. (oui, je l'ai eu et a trouvé cette façon que fonctionne! 🙂
InformationsquelleAutor Kees C. Bakker

109

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

    }


 });

FYI: break; ne se cassera pas. Vous devez utiliser return false;

InformationsquelleAutor stephen776

48

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

Sans jQuery:

Il suffit de sélectionner les éléments et les utiliser le .forEach() méthode pour itérer sur les:
```
var testimonials = document.querySelectorAll('.testimonial');
Array.prototype.forEach.call(testimonials, function(elements, index) {
    //conditional here.. access elements
});
```
InformationsquelleAutor 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 plus de 2 alors nous avons besoin de cette jquery.

$('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

InformationsquelleAutor Manoj

vous pouvez le faire de cette façon

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

InformationsquelleAutor Ghyath Serhal

17
```
divs  = $('.testimonial')
for(ind in divs){
  div = divs[ind];
  //do whatever you want
}
```
- qui ne vous donne pas les objets jquery si, juste des éléments du dom
- ne pouvez pas attendre de jQuery à tout faire pour vous. C'est une question de faire votre propre Objet jQuery $(ind).
InformationsquelleAutor ikostia

jQuery .eq() peut vous aider à traverser les éléments indexés approche.

var testimonialElements = $(".testimonial");
for(var i=0; i<testimonialElements.length; i++){
    var element = testimonialElements.eq(i);
    //do something with element
}

c'est l'approche la plus efficace en effet.

InformationsquelleAutor Atharva

13

Vous pouvez le faire de manière concise à l'aide de .filtre. L'exemple suivant permet de masquer tous .témoignage divs contenant le mot "quelque chose":
```
$(".testimonial").filter(function() {
    return $(this).text().toLowerCase().indexOf("something") !== -1;
}).hide();
```
InformationsquelleAutor 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');
}

InformationsquelleAutor Ismail Rubad

8

J'ai peut-être partie manquante de la question, mais je crois que vous pouvez simplement faire ceci:
```
$('.testimonial').each((index, element) => {
    if (/* Condition */) {
        //Do Something
    }
});
```
Il utilise jQuery chaque méthode: https://learn.jquery.com/using-jquery-core/iterating/

InformationsquelleAutor David Smith

Sans jQuery mis à jour

JS:

document.querySelectorAll('.testimonial').forEach(function (element, index) {
    element.innerHTML = 'Testimonial ' + (index + 1);
});

HTML:

<div class="testimonial"></div>
<div class="testimonial"></div>

presque la même réponse est déjà là, je pense que vous devriez modifier

InformationsquelleAutor KrisInception

$('.testimonal').each(function(i,v){
  if (condition) {
    doSomething();
  }
});

InformationsquelleAutor davin

4

Plus précis:
```
$.each($('.testimonal'), function(index, value) { 
    console.log(index + ':' + value); 
});
```
- Pourquoi de plus en plus précis?
- C'est bien si vous aimez la lecture et l'écriture dans une perspective plus fonctionnelle.
InformationsquelleAutor Atif Tariq
2

En JavaScript ES6 .forEach()
sur une semblable au tableau NodeList collection donné par Element.querySelectorAll()

JS:
```
document.querySelectorAll('.testimonial').forEach( el => {
  el.style.color = 'red';
  console.log( `Element ${el.tagName} with ID #${el.id} says: ${el.textContent}` );
});
```
HTML:
```
<p class="testimonial" id="1">This is some text</p>
<div class="testimonial" id="2">Lorem ipsum</div>
```
- La propagation de l'opérateur + de la matrice de notation n'est pas nécessaire, sûrement faire doc..torAll.forEach() suffirait?
- Je vous remercie. Absolument. [...ArrayLike] a été utilisé pour le moment querySelectorAll n'a pas eu de soutien pour .forEach. @aabbccsmith
- Je n'étais pas au courant! Vous apprenez quelque chose de nouveau chaque jour 🙂
- Concernant votre edit, merci pour les versions et les dates. Ce qui est inutile est le guillemet double (certains linters de même par défaut de vous obliger à utiliser des apostrophes qui j'ai dernièrement absolument préférez), et il n'y avait pas besoin d'enlever le "un tableau comme" parce qu'en termes techniques - qu'est ce qu'une NodeList est en réalité. Aussi, aujourd'hui il est censé votre frontend environnement de dev utilise transpilers et polyfills. Aussi ES6 n'a pas pu être plus audacieux 🙂
InformationsquelleAutor Roko C. Buljan

Vous devez vous connecter pour publier un commentaire.

Sans jQuery: