Jquery selector next element

Question

다음 요소를 모두 선택하는 방법이 있습니까? 예 :

<div class="div1"> 
    <span class="span2">span1</span> 

    <div class="div2"> 
     <span class="span2">span2</span> 
    </div> 

    <span id="current_span">current span></span> 

    <span class="span2">span3</span> 

    <div class="div2"> 
     <span class="span2">span4</span> 
    </div> 

</div> 

나는 같은 것을 할 싶습니다 :

$("#current_span").[select_every_next_item_with_span2_class].hide(); 

span3/span4가

$("#current_span").[select_every_prev_item_with_span2_class].show(); 

span1/span2 V

그리고

숨겨진 이블

Answer 1

jQuery의 nextAll() 및 prevAll() 함수로이 작업을 수행 할 수 있습니다.

코드에 대한

이는 다음과 같습니다 특정 사람과 별도의 무언가를하고자하는 경우

항상

$("#current_span").nextAll().hide(); 
$("#current_span").prevAll().hide(); 

, 당신은 즉,이 each() 기능을 사용 (기능에서 목록의 항목을 통과 할 수).

편집 : 당신은뿐만 아니라 형제의 자식 요소를 선택합니다 , 당신은 할 수 있습니다 : 이것은 형제 자매와 형제 자매의 자녀 모두를 선택

$("#current_span").nextAll().children().andSelf().hide(); 

.

코드 스 니펫을 추가하여 코드에서 어떻게 작동하는지 보여줍니다. 위쪽 두 요소를 전환하려면 currentspan1을 클릭하고 아래쪽 2 개를 전환하려면 currentspan2을 클릭하십시오.

$("#current_span1").click(function(){ 
 
    $(this).prevAll().toggle(); 
 
}); 
 

 
$("#current_span2").click(function(){ 
 
    $(this).nextAll().toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="div1"> 
 
    <span class="span2">span1</span> 
 

 
    <div class="div2"> 
 
    <span class="span2">span2</span> 
 
    </div> 
 

 
    <span id="current_span1">current span1</span> <br> 
 
    <span id="current_span2">current span2</span> <br> 
 

 
    <span class="span2">span3</span> 
 

 
    <div class="div2"> 
 
    <span class="span2">span4</span> 
 
    </div> 
 
</div>

Answer 2

당신은 다음의 모든 형제 자매를 얻을하고 당신이 필요로하는 요소 하나 하나를 통과 할 nextAll()를 사용할 수 있습니다.

$("#current_span").nextAll().each(function() { 
     if ($(this).is(".span2")) { 
      $(this).hide(); 
     } 
     $(this).find(".span2").hide(); 
}); 
$("#current_span").prevAll().each(function() { 
     if ($(this).is(".span2")) { 
      $(this).show(); 
     } 
     $(this).find(".span2").show(); 
}); 

https://jsfiddle.net/tq3ubLap/

Answer 3

에 관계없이 현재의 .span2의 관계의 문서의 범위 내에서 인덱스를 얻을 수 index('.span2')를 사용할 수있는 모든 이전/다음 .span2 요소를 검색하려면 바이올린 예. 거기에서 slice()을 사용하여 필수 요소를 검색 할 수 있습니다. 이 시도 :

$('.span2').click(function() { 
 
\t var $spans = $('.span2'); 
 
\t var index = $(this).index('.span2'); 
 
    var $prev = $spans.slice(0, index); 
 
    var $next = $spans.slice(index + 1); 
 
    
 
    // for demo purposes only 
 
    $('.span2').removeClass('next prev'); 
 
    $prev.addClass('prev'); 
 
    $next.addClass('next'); 
 
});

.prev { 
 
    background-color: #C00; 
 
    color: #FFF; 
 
} 
 
.next { 
 
    background-color: #CC0; 
 
    color: #333; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="div1"> 
 
    <span class="span2">span1</span> 
 

 
    <div class="div2"> 
 
     <span class="span2">span2</span> 
 
    </div> 
 

 
    <span id="current_span">current span></span> 
 

 
    <span class="span2">span3</span> 
 

 
    <div class="div2"> 
 
     <span class="span2">span4</span> 
 
    </div> 
 
</div>