How to get all items after the selected item
How do I include the last item?
$('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>
source to share
You can use instead nextAll()
:
$('div.current').nextAll().addClass('foo');
.foo { color: #00F; }
<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>
source to share
You can use a method andSelf
in combination with a method next()
.
andSelf
adds the previous set of items onto the stack to the current set.
$('div.current').nextUntil("div:last").andSelf().next().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>
source to share
You can use the generic sibling combinator ~
in your selector
$('div.current ~ div').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>
source to share
You can just not pass the parameter inside nextUntil()
and it will select all the following next items.
Or maybe use 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>
source to share
Use the following jquery method instead of nextUntil.
$('div.current').nextAll().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>
source to share
This is what you wanted to do with your code ^^
$('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>
source to share