Reverting Chains with end() and addBack()
In this page:
Using end()
Calling .end() undoes the most recent filtering or traversal step in a chain, restoring the selection jQuery held right before it. This lets you branch off from a selection, do something, then return to continue working with the original set.
Example: Using end()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"><li class="a">One</li><li>Two</li></ul>
<script>
const result = $("#list").find(".a").css("color", "red").end().find("li").length;
console.log(result);
</script>
</body>
</html>Chaining with end()
end() is helpful when one long chain needs to work on multiple levels of related elements -- find a child, act on it, end() back to the parent, then find a different child -- without breaking the chain into separate statements.
Example: Chaining with end()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box"><p class="a">A</p><span class="b">B</span></div>
<script>
$("#box").find(".a").css("color", "red").end().find(".b").css("color", "blue");
</script>
</body>
</html>Using addBack()
addBack() adds the previous selection back into the current set instead of fully discarding it, combining both selections together. This differs from end(), which discards the current step; addBack() keeps both the current and prior elements.
Example: Using addBack()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"><li>One</li><li class="a">Two</li></ul>
<script>
const set = $("#list").find("li").filter(".a").addBack();
console.log(set.length);
</script>
</body>
</html>end() vs addBack()
end() moves back to the previous selection, dropping whatever the last traversal or filter step added. addBack() instead merges the previous selection into the current one, so you end up with elements from both steps combined.
Example: end() vs addBack()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"><li>One</li><li class="a">Two</li></ul>
<script>
console.log("end():", $("#list").find("li").filter(".a").end().length);
console.log("addBack():", $("#list").find("li").filter(".a").addBack().length);
</script>
</body>
</html>Traversal Chain Practice
These methods help keep complex traversal chains readable by avoiding repeated variable assignments just to remember an earlier selection. A long chain that dips into children, filters them, and returns to the parent stays as one continuous statement.
Example: Traversal Chain Practice
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box"><p class="a">A</p></div>
<script>
$("#box").find(".a").css("color", "red").end().css("border", "1px solid black");
</script>
</body>
</html>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: