Jquery选择器下一个元素

有没有办法选择每个下一个元素（嵌套或不）？例子：Jquery选择器下一个元素

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

来源

2016-06-07 Jax Teller

['nextAll（）']（https://api.jquery.com/nextAll/） – Tushar

和** ['prevAll（）']（HTTPS： //api.jquery.com/prevAll/)** –

每隔一段时间阅读http://api.jquery.com上的方法列表总是值得的。大多数方法名称都是非常具有描述性的，即使没有点击它们的描述，也应该给你一个关于它们做什么的好主意。 tl; dr RTFM;） –

你可以用jQuery的nextAll()和prevAll()函数来做到这一点。

为您的代码，这将是：

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

与往常一样，你可以，如果你希望做一些不同的具体的人遍历从功能列表中的项目（即使用each()功能）。

编辑：如果你要选择的兄弟姐妹的子元素，以及，你可以这样做：

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

这两种选择的兄弟姐妹和兄弟姐妹的子女。

我还添加了一段代码，告诉你如何使用你的代码。点击currentspan1切换顶部的两个元素和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>

来源

2016-06-07 13:03:28 Blubberguy22

我编辑的问题，因为我可能是ambigious，在我的例子，我需要span1/span2与prev选择。 prevAll只给我span1 –

值得注意的是，nextAll和prevAll只遍历兄弟元素，还是我错过了明显的东西？ – apokryfos

@apokryfos你是对的 – Blubberguy22

您可以使用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/

来源

2016-06-07 13:04:34 apokryfos

我编辑的问题，因为我可能是ambigious，在我的例子，我需要span1/span2与prev选择。 prev只给我span1 –

要检索所有的一首/下一.span2元素，无论其当前的.span2关系，你可以使用index('.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>

来源

2016-06-07 13:22:33

Jquery选择器下一个元素

回答

相关问题