동일한 클래스의 요소를 반복하는 jQuery

클래스에 div가 많이 있으며 testimonialjquery를 사용하여 특정 조건이 true 인 경우 각 div를 확인하기 위해 루프를 반복하고 싶습니다. 사실이면 조치를 수행해야합니다.

내가 어떻게 할 것인지 아는 사람 있습니까?

' i'는 배열의 위치이며 obj반복하는 DOM 객체입니다 (jQuery 래퍼 $(this)를 통해 액세스 할 수도 있음 ).

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

자세한 내용 은 API 참조 를 확인하십시오.

이 시도...

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


    if(condition){

    }


 });

요즘 jQuery 없이이 작업을 수행하는 것은 매우 간단합니다.

jQuery없이 :

요소를 선택하고 .forEach()메소드 를 사용하여 반복하십시오.

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

구형 브라우저에서 :

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

이 예를보십시오

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>

우리가 접근하는 사람들하려는 경우 divs가있는 data-index것보다 더 큰 2우리가이 jQuery를해야합니다.

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

작업 예 바이올린

이 방법으로 할 수 있습니다

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

jQuery의 .eq () 를 사용하면 인덱스 방식으로 요소를 탐색 할 수 있습니다.

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
}

당신은 이것을 사용하여 간결하게 할 수 있습니다 .filter. 다음 예는 "something"이라는 단어가 포함 된 모든 .testimonial div를 숨 깁니다.

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

간단한 for 루프로 :

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

jQuery가 업데이트되지 않은 경우

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

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

질문의 일부가 누락되었을 수도 있지만 간단하게 수행 할 수 있다고 생각합니다.

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

이것은 jQuery의 각 방법을 사용합니다 : https://learn.jquery.com/using-jquery-core/iterating/

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

더 정확하게:

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

JavaScript ES6에서 .forEach () 는 다음 과 같이 배열과 같은 NodeList 컬렉션 을 통해Element.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>

jQuery $ each 메소드를 사용하여 클래스 평가가있는 모든 요소를 ​​반복 할 수 있습니다. i =>는 콜렉션에있는 요소의 색인이며 val은 해당 특정 요소의 오브젝트를 제공하며 "val"을 사용하여 요소의 특성에 추가로 액세스하고 조건을 점검 할 수 있습니다.

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