jQuery zum Durchlaufen von Elementen mit der gleichen Klasse

Question

Ich habe eine Reihe von Divs mit der Klasse testimonial und ich möchte Jquery verwenden, um Schleife durch sie für jedes div zu überprüfen, wenn eine bestimmte Bedingung wahr ist. Wenn es wahr ist, sollte es eine Aktion durchführen.

Weiß jemand, wie ich das machen kann?

Answer 1

Verwenden Sie jeden: ' i ' ist die Position im Array, obj ist das DOM-Objekt, das Sie iterieren (kann durch den jQuery-Wrapper zugegriffen werden $(this) auch).

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

Prüfen Sie die Api-Referenz für weitere Informationen.

Answer 2

Versuchen Sie dies...

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

    if(condition){

    }

 });

Answer 3

Heutzutage ist es ziemlich einfach, dies ohne jQuery zu tun.

Ohne jQuery:

Wählen Sie einfach die Elemente aus und verwenden Sie die .forEach() Methode um sie zu iterieren:

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

In älteren Browsern:

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

Answer 4

Versuchen Sie dieses Beispiel

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>

Wenn wir auf diese Daten zugreifen wollen divs die über data-index größer als 2 dann brauchen wir diese Jquery.

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

Arbeitsbeispiel Fiedel

Answer 5

Sie können es so machen

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