Traversing Siblings Backward
In this page:
prev()
.prev() returns the sibling element that sits directly before the selected one at the same level in the DOM. Like next(), it only ever returns a single element, the one immediately preceding, never further back.
Example: prev()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="first">First</p><p id="second">Second</p>
<script>
console.log($("#second").prev().text());
</script>
</body>
</html>prevAll()
prevAll() selects every sibling that comes before the selected element, all the way back to the start of its parent's children. It's the mirror image of nextAll(), collecting everything earlier instead of everything later.
Example: prevAll()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p>One</p><p>Two</p><p id="end">Three</p>
<script>
console.log($("#end").prevAll().length);
</script>
</body>
</html>prevUntil()
prevUntil() selects preceding siblings but stops just before reaching a matching element you specify, rather than collecting all the way back to the start. This gives you precise control over exactly which range of earlier siblings you get.
Example: prevUntil()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="start">Start</p><p>Mid</p><p id="end">End</p>
<script>
console.log($("#end").prevUntil("#start").length);
</script>
</body>
</html>prev with Filters
Backward traversal can be combined with a selector the same way forward traversal can, filtering the preceding siblings down to only the ones matching a particular tag or class. This avoids extra filtering logic after the fact.
Example: prev with Filters
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<span>Not a p</span><p>A paragraph</p><p id="end">End</p>
<script>
console.log($("#end").prevAll("p").length);
</script>
</body>
</html>Backward Traversal Practice
Backward traversal is useful when a later element needs to control or reference an earlier one, such as a 'clear form' button resetting every input that comes before it. It lets your code express 'everything before this point' directly.
Example: Backward Traversal Practice
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input value="a"><input value="b"><button id="clear">Clear Form</button>
<script>
$("#clear").on("click", function() {
$(this).prevAll("input").val("");
});
</script>
</body>
</html>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: