jQuery aynı sınıfa sahip öğeler arasında geçiş yapmak için

testimonialDiv sınıfı ile bir yük var ve belirli bir koşul doğru olup olmadığını her div için denetlemek için döngü aracılığıyla jquery kullanmak istiyorum. Doğruysa, bir eylem gerçekleştirmelidir.

Bunu nasıl yapacağımı bilen var mı?

Her birini kullanın: ' i' dizideki objkonumdur, yinelemekte olduğunuz DOM nesnesidir (jQuery sarmalayıcısıyla da erişilebilir $(this)).

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

Kontrol API referansı Daha fazla bilgi için.

bunu dene...

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


    if(condition){

    }


 });

Bunu bugünlerde jQuery olmadan yapmak oldukça basit.

JQuery olmadan:

Sadece öğeleri seçin ve üzerinde yineleme yapmak için .forEach()yöntemi kullanın:

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

Daha eski tarayıcılarda:

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

Bu örneği deneyin

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>

O divszamandan data-indexdaha büyük olanlara erişmek istediğimizde 2bu jquery'ye ihtiyacımız var.

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

Çalışma örneği keman

bu şekilde yapabilirsin

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

jQuery'nin .eq () öğesi, dizin oluşturulmuş bir yaklaşımla öğeler arasında geçiş yapmanıza yardımcı olabilir.

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
}

Bunu kısaca kullanarak yapabilirsiniz .filter. Aşağıdaki örnek, "bir şey" kelimesini içeren tüm .testimonial div öğelerini gizleyecektir:

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

Basit bir döngü ile:

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

JQuery güncellenmeden

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

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

Sorunun bir kısmını kaçırıyor olabilirim, ancak bunu yapabileceğinize inanıyorum:

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

Bu, jQuery'nin her yöntemini kullanır: https://learn.jquery.com/using-jquery-core/iterating/

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

Daha kesin:

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

JavaScript ES6 .forEach () tarafından verilen bir dizi benzeri NodeList koleksiyonu üzerindenElement.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>

Sınıf referansı ile tüm öğeler arasında döngü için jQuery $ each yöntemini kullanabilirsiniz. i => koleksiyondaki öğenin dizinidir ve val size o öğenin nesnesini verir ve öğenizin özelliklerine daha fazla erişmek ve durumunuzu kontrol etmek için "val" kullanabilirsiniz.

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