jQuery zum Durchlaufen von Elementen mit derselben Klasse

Ich habe eine testimonialMenge Divs mit der Klasse und möchte sie mit jquery durchlaufen, um für jedes Div zu überprüfen, ob eine bestimmte Bedingung erfüllt ist. Wenn es wahr ist, sollte es eine Aktion ausführen.

Weiß jemand, wie ich das machen würde?

Verwenden Sie jeweils: ' i' ist die Position im Array, objist das DOM-Objekt, das Sie iterieren (kann auch über den jQuery-Wrapper aufgerufen werden $(this)).

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

Überprüfen Sie die API-Referenz für weitere Informationen.

Versuche dies...

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


    if(condition){

    }


 });

Es ist heutzutage ziemlich einfach, dies ohne jQuery zu tun.

Ohne jQuery:

Wählen Sie einfach die Elemente aus und iterieren Sie mit der .forEach()Methode darüber:

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
});

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 diejenigen zugreifen wollen, divsdie data-indexgrößer als 2dann sind, brauchen wir diese Abfrage.

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

Arbeitsbeispiel Geige

Sie können es auf diese Weise tun

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

Mit .eq () von jQuery können Sie Elemente mit einem indizierten Ansatz durchlaufen.

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

divs  = $('.testimonial')
for(ind in divs){
  div = divs[ind];
  //do whatever you want
}

Sie können dies präzise mit tun .filter. Im folgenden Beispiel werden alle Testimonial-Divs ausgeblendet, die das Wort "etwas" enthalten:

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

Mit einer einfachen for-Schleife:

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

Ohne jQuery aktualisiert

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

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

Möglicherweise fehlt mir ein Teil der Frage, aber ich glaube, Sie können dies einfach tun:

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

Hierbei wird jede Methode von jQuery verwendet: https://learn.jquery.com/using-jquery-core/iterating/

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

Etwas genauer:

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

In JavaScript ES6 .forEach () über eine Array-ähnliche NodeList- Auflistung vonElement.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>

Sie können die Methode jQuery $ each verwenden, um alle Elemente mit einem Klassenzeugnis zu durchlaufen. i => ist der Index des Elements in der Sammlung und val gibt Ihnen das Objekt dieses bestimmten Elements an. Mit "val" können Sie weiter auf die Eigenschaften Ihres Elements zugreifen und Ihren Zustand überprüfen.

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