복붙노트

[JQUERY] 동일한 클래스 요소를 통해 루프 jQuery를

JQUERY

동일한 클래스 요소를 통해 루프 jQuery를

해결법


  1. 1.각각의 사용 : '내가'배열의 위치, 당신은 ($ (이 래퍼 JQuery와 통해 액세스 할 수 있습니다)뿐만 아니라) 순회를한다는 DOM 객체 OBJ입니다.

    각각의 사용 : '내가'배열의 위치, 당신은 ($ (이 래퍼 JQuery와 통해 액세스 할 수 있습니다)뿐만 아니라) 순회를한다는 DOM 객체 OBJ입니다.

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

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


  2. 2.이 시도...

    이 시도...

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

  3. 3.그것은 요즘 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
    });
    

  4. 4.이 예제를보십시오

    이 예제를보십시오

    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>
    

    우리가 2보다 데이터 인덱스 이상을 가지고 그 div에 액세스 할 때 우리는이 jQuery를해야합니다.

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

    작업 예제 바이올린


  5. 5.당신은이 방법을 수행 할 수 있습니다

    당신은이 방법을 수행 할 수 있습니다

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

  6. 6.

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

  7. 7.jQuery의 .EQ는 () 트래버스 인덱스 접근을 가진 요소를 통해 당신을 도울 수 있습니다.

    jQuery의 .EQ는 () 트래버스 인덱스 접근을 가진 요소를 통해 당신을 도울 수 있습니다.

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

  8. 8.당신은 간결 .filter 사용하여이 작업을 수행 할 수 있습니다. 다음은 단어 "뭔가"를 포함하는 모든 .testimonial 된 div를 숨길 수 :

    당신은 간결 .filter 사용하여이 작업을 수행 할 수 있습니다. 다음은 단어 "뭔가"를 포함하는 모든 .testimonial 된 div를 숨길 수 :

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

  9. 9.루프에 대한 간단한으로 :

    루프에 대한 간단한으로 :

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

  10. 10.jQuery를 업데이트하지 않고

    jQuery를 업데이트하지 않고

    document.querySelectorAll ( ". 증명서 '). 대해 forEach (기능 (요소, 인덱스) { element.innerHTML = '증명서'+ (인덱스 + 1); });


  11. 11.나는 질문의 일부를 누락 될 수 있습니다,하지만 난 당신이 단순히이 작업을 수행 할 수 있다고 생각합니다 :

    나는 질문의 일부를 누락 될 수 있습니다,하지만 난 당신이 단순히이 작업을 수행 할 수 있다고 생각합니다 :

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

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


  12. 12.

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

  13. 13.더 정확하게:

    더 정확하게:

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

  14. 14.에서 자바 스크립트 ES6 .forEach () Element.querySelectorAll 의해 주어진 NodeList를 어레이 형상 콜렉션 ()

    에서 자바 스크립트 ES6 .forEach () Element.querySelectorAll 의해 주어진 NodeList를 어레이 형상 콜렉션 ()

    document.querySelectorAll ( '. 증명서'). 대해 forEach (엘 => { el.style.color = '빨간색'; CONSOLE.LOG (ID을 # $ {el.id}와`요소 $ {el.tagName}는 말한다 : $ {el.textContent}`); });

    이 텍스트는

    로렘 입숨


  15. 15.당신은 클래스 증명서와 모든 요소를 ​​통해 루프에 jQuery를 $ 각 방법을 사용할 수 있습니다. 난 => 컬렉션의 요소의 인덱스와 val는 당신에게 특정 요소의 목적을 제공하고 추가로 액세스 할 요소의 속성을 "발"을 사용하여 상태를 확인할 수 있습니다.

    당신은 클래스 증명서와 모든 요소를 ​​통해 루프에 jQuery를 $ 각 방법을 사용할 수 있습니다. 난 => 컬렉션의 요소의 인덱스와 val는 당신에게 특정 요소의 목적을 제공하고 추가로 액세스 할 요소의 속성을 "발"을 사용하여 상태를 확인할 수 있습니다.

    $.each($('.testimonal'), function(i, val) { 
        if(your condition){
           //your action
        }
    });
    
  16. from https://stackoverflow.com/questions/4735342/jquery-to-loop-through-elements-with-the-same-class by cc-by-sa and MIT license