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

Answer 1

您可以使用jQuery的nextAll()和prevAll()函数执行此操作。

对于您的代码，这将是：

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

与往常一样，如果您希望使用特定的功能单独执行某些操作，则可以遍历列表中的项目（即使用each()功能）。

编辑：如果您还想选择兄弟姐妹的子元素，您可以这样做：

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

这会选择兄弟姐妹的兄弟姐妹和孩子。

我还添加了一个代码段，向您展示如何使用您的代码。点击currentspan1切换前两个元素，然后currentspan2切换底部两个元素。

＆＃13;

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

＆＃13;

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

＆＃13;

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元素，无论它们与当前.span2的关系如何，您都可以使用index('.span2')将其索引置于文档范围内。从那里，您可以使用slice()来检索所需的元素。试试这个：

＆＃13;

$('.span2').click(function() {
	var $spans = $('.span2');
	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');
});

＆＃13;

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

＆＃13;

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

＆＃13;

Jquery选择器下一个元素

3 个答案: