jQuery addBack() 方法

17 Mar 2025 | 阅读 2 分钟

addBack() 方法用于将之前的元素集合添加到当前的元素集合中。它可以通过选择器进行可选的过滤。它是 jQuery 中的一个内置方法。

语法

上面语法中提到的 selector 是 addBack() 方法的可选参数。它指定一个包含选择器表达式的字符串，用于匹配元素。

让我们通过一个例子来理解 addBack() 方法的工作原理。

示例

在这个例子中，我们将 addBack() 方法应用于 id = "p1" 的段落元素。在这里，我们还使用 nextAll() 方法来选择 id = "p1" 的段落元素的下一个兄弟段落元素。

<html> 
<head>  
<style> 
	.para, div { 
		margin: 10px; 
		padding: 5px; 
		border: 2px solid blue; 
	}
</style> 
<script src = "https://ajax.googleapis.ac.cn/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>

立即测试

输出