如何获取所选元素后的所有元素

时间:2017-03-27 09:26:26

标签: javascript jquery html css

如何包含最后一个元素?

$('div.current').nextUntil("div:last").css("color", "blue");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>First</div>
<div>Second</div>
<div class="current">Third</div>
<div>Fourth</div>
<div>Fifth</div>
<div>Sixth</div>
<div>Seventh</div>

6 个答案:

答案 0 :(得分:2)

您可以改为使用string1 <TAB> string2 <TAB> 9999 abc dehi [way:pn9999] <TAB> 001 <TAB> org; string3 string4 string5 <TAB> string6 <TAB> 9999 dwd meti [way:pn8999] <TAB> 002 <TAB> org2; string7 string8 <TAB> string9 <TAB> 9999 dwd meti [way:pn7999] <TAB> 003 <TAB> org4; string10

&#13;
&#13;
nextAll()
&#13;
$('div.current').nextAll().addClass('foo');
&#13;
.foo { color: #00F; }
&#13;
&#13;
&#13;

答案 1 :(得分:2)

您可以将andSelf方法与next()方法结合使用。

  

andSelf方法将堆栈上的前一组元素添加到   目前的设定。

&#13;
&#13;
$('div.current').nextUntil("div:last").andSelf().next().css("color", "blue");
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>First</div>
<div>Second</div>
<div class="current">Third</div>
<div>Fourth</div>
<div>Fifth</div>
<div>Sixth</div>
<div>Seventh</div>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

您可以在选择器中使用general sibling combinator ~

&#13;
&#13;
$('div.current ~ div').css("color", "blue");
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>First</div>
<div>Second</div>
<div class="current">Third</div>
<div>Fourth</div>
<div>Fifth</div>
<div>Sixth</div>
<div>Seventh</div>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

您可以在nextUntil()内部不传递参数,它将选择以下所有元素。

或者也许使用nextAll()

$('div.current').nextUntil().css("color", "blue");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>First</div>
<div>Second</div>
<div class="current">Third</div>
<div>Fourth</div>
<div>Fifth</div>
<div>Sixth</div>
<div>Seventh</div>

答案 4 :(得分:0)

使用jQuery的nextAll方法而不是nextUntil。

&#13;
&#13;
$('div.current').nextAll().css("color", "blue");
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>First</div>
<div>Second</div>
<div class="current">Third</div>
<div>Fourth</div>
<div>Fifth</div>
<div>Sixth</div>
<div>Seventh</div>
&#13;
&#13;
&#13;

答案 5 :(得分:0)

以下是您要对代码执行的操作^^

$('div.current').nextUntil("html").css("color", "blue");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>First</div>
<div>Second</div>
<div class="current">Third</div>
<div>Fourth</div>
<div>Fifth</div>
<div>Sixth</div>
<div>Seventh</div>