jQuery lặp qua các phần tử có cùng lớp

Tôi có một lượng div với lớp testimonialvà tôi muốn sử dụng jquery để lặp qua chúng để kiểm tra từng div nếu một điều kiện cụ thể là đúng. Nếu nó đúng, nó sẽ thực hiện một hành động.

Có ai biết làm thế nào tôi sẽ làm điều này?

Sử dụng mỗi: ' i' là tư thế trong mảng, objlà đối tượng DOM mà bạn đang lặp lại (cũng có thể được truy cập thông qua trình bao bọc jQuery $(this)).

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

Kiểm tra tài liệu tham khảo api để biết thêm thông tin.

thử cái này...

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


    if(condition){

    }


 });

Ngày nay khá đơn giản để làm điều này mà không cần jQuery.

Không có jQuery:

Chỉ cần chọn các phần tử và sử dụng .forEach()phương thức để lặp lại chúng:

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

Trong các trình duyệt cũ hơn:

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

Hãy thử ví dụ này

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>

Khi chúng ta muốn truy cập vào những người divscó data-indexnhiều hơn 2thì chúng ta cần jquery này.

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

Ví dụ làm việc

bạn có thể làm theo cách này

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

.Eq () của jQuery có thể giúp bạn duyệt qua các phần tử với cách tiếp cận được lập chỉ mục.

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
}

Bạn có thể làm điều này một cách chính xác bằng cách sử dụng .filter. Ví dụ sau sẽ ẩn tất cả các div .testimonial có chứa từ "cái gì đó":

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

Với một vòng lặp đơn giản:

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

Không có jQuery cập nhật

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

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

Tôi có thể thiếu một phần của câu hỏi, nhưng tôi tin rằng bạn chỉ có thể làm điều này:

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

Điều này sử dụng từng phương thức của jQuery: https://learn.jquery.com/USE-jquery-core/iterating/

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

Chính xác hơn:

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

Trong JavaScript ES6 .forEach () qua bộ sưu tập NodeList giống như mảng được cung cấp bởiElement.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>

Bạn có thể sử dụng jQuery $ mỗi phương thức để lặp qua tất cả các phần tử với lời chứng thực lớp. i => là chỉ mục của phần tử trong bộ sưu tập và val cung cấp cho bạn đối tượng của phần tử cụ thể đó và bạn có thể sử dụng "val" để truy cập thêm vào các thuộc tính của phần tử và kiểm tra điều kiện của bạn.

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