jQuery addBack() method

The addBack() method is used to add the previous set of elements to the current set. It is optionally filtered by the selector. It is an inbuilt method in jQuery.

Syntax

The selector mentioned in the above syntax is the optional parameter of the addBack() method. It specifies a string that contains a selector expression to match the elements against.

Let's understand the working of the addBack() method using an illustration.

Example

In this example we are applying the addBack() method to the paragraph element with id = "p1". Here, we are also using the nextAll() method to select the next paragraph siblings of the paragraph element with id = "p1".

<html> 
<head>  
<style> 
	.para, div { 
		margin: 10px; 
		padding: 5px; 
		border: 2px solid blue; 
	}
</style> 
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
</head> 
<body> 
<h2> It is an example of using the addBack() method. </h2>
			<div> div
			<p id = "p1" class = "para"> Paragraph 1 </p> 
			<p class = "para"> Paragraph 2 </p> 
			<p class = "para"> Paragraph 3 </p> 
		</div> 
		<p> Click the below button to see the effect. </p>
		<button> Click me </button>
		<h4> Here, we can see that the paragraph 1 is also selected. This is due to the addBack() method. If we do not use it, only 2nd and 3rd paragraphs will get selected. </h4>
<script> 
$(document).ready(function() {
$("h4").hide();
$("button").click(function() {
$("h4").show();
$("#p1").nextAll().addBack().css( "background-color", "yellow" ); 
});
});
</script> 
</body> 
</html>

Test it Now

Output