Jquery-Selektor nächstes Element

Question

Gibt es eine Möglichkeit, jedes nächste Element auszuwählen (verschachtelt oder nicht)? Beispiel:

<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> 

würde Ich mag so etwas wie es tun:

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

span3/span4 versteckt

Und

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

span1/span2 v isible

Answer 1

Sie könnten dies mit den Funktionen nextAll() und prevAll() von jQuery tun.

für Ihren Code, wäre dies:

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

Und wie immer Sie die Elemente in der Liste der Funktionen durchqueren können, wenn Sie etwas getrennt mit spezifischen diejenigen tun wollen (dh die each() Funktion).

EDIT: Wenn Sie die untergeordneten Elemente der Geschwister als auch auswählen möchten, können Sie tun:

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

Dies sowohl die Geschwister und die Kinder der Geschwister auswählt.

Ich habe auch ein Code-Snippet hinzugefügt, um Ihnen zu zeigen, wie dies mit Ihrem Code funktionieren kann. Klicken Sie auf currentspan1, um die oberen beiden Elemente umzuschalten, und currentspan2, um die unteren beiden Elemente umzuschalten.

$("#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

können Sie nextAll() verwenden, um alle nächsten Geschwister zu bekommen und dann jeder für die Elemente durchqueren Sie benötigen.

$("#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(); 
}); 

Fiddle Beispiel https://jsfiddle.net/tq3ubLap/

Answer 3

alle vorherigen/nächsten .span2 Elemente abzurufen, unabhängig von ihrer Beziehung zu dem aktuellen .span2 könnten Sie index('.span2') verwenden ihren Index im Rahmen des Dokuments zu erhalten. Von dort können Sie slice() verwenden, um die erforderlichen Elemente abzurufen. Versuchen Sie folgendes:

$('.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>