jQuery untuk mengulang elemen-elemen dengan kelas yang sama

Saya punya banyak divs dengan kelas testimonialdan saya ingin menggunakan jquery untuk mengulanginya untuk memeriksa setiap div jika kondisi tertentu benar. Jika itu benar, ia harus melakukan suatu tindakan.

Adakah yang tahu bagaimana saya akan melakukan ini?

Gunakan masing-masing: ' i' adalah posisi dalam array, objadalah objek DOM yang Anda iterasi (dapat diakses melalui pembungkus jQuery $(this)juga).

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

Periksa referensi api untuk informasi lebih lanjut.

coba ini...

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


    if(condition){

    }


 });

Sangat mudah untuk melakukan ini tanpa jQuery hari ini.

Tanpa jQuery:

Cukup pilih elemen dan gunakan .forEach()metode untuk beralih di atasnya:

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

Di browser lama:

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

Coba contoh ini

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>

Ketika kita ingin mengakses divsyang data-indexlebih besar dari 2itu, kita memerlukan jquery ini.

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

Contoh biola yang bekerja

kamu bisa melakukannya dengan cara ini

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

.eq () jQuery dapat membantu Anda menelusuri elemen dengan pendekatan yang diindeks.

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
}

Anda dapat melakukan ini secara ringkas menggunakan .filter. Contoh berikut akan menyembunyikan semua div .testimonial yang berisi kata "sesuatu":

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

Dengan loop sederhana:

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

Tanpa jQuery diperbarui

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

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

Saya mungkin kehilangan sebagian dari pertanyaan, tetapi saya yakin Anda bisa melakukan ini:

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

Ini menggunakan setiap metode jQuery: https://learn.jquery.com/using-jquery-core/iterating/

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

Lebih tepat:

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

Dalam JavaScript ES6 .forEach () di atas koleksi NodeList seperti array yang diberikan olehElement.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>

Anda bisa menggunakan jQuery $ setiap metode untuk mengulang semua elemen dengan testimonial kelas. i => adalah indeks elemen dalam koleksi dan val memberi Anda objek elemen tertentu dan Anda dapat menggunakan "val" untuk lebih lanjut mengakses properti elemen Anda dan memeriksa kondisi Anda.

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