jQuery parents() 方法用于获取给定选择器的所有祖先元素。它是 jQuery 中的一个内置函数。此方法从父元素向上遍历，在 DOM 树中向上遍历，并返回所选元素的所有祖先。

parents() 方法和parent() 方法区别：

parents() 方法类似于 parent() 方法，因为它们都向上移动到 DOM 树并返回父元素。但不同的是，parents() 方法在 DOM 树中向上遍历多个层级并返回给定选择器的所有祖先，包括祖父母、曾祖父母等，而 parent() 方法向上遍历单个级别，并且只返回给定选择器的直接父级。

语法

$(selector).parents(filter)
filter：可选参数，指定选择器表达式，用于缩小祖先的搜索范围。如果我们需要获取多个祖先，我们必须用逗号分隔每个表达式。

例子

例1

返回h4元素的所有父元素。

<!DOCTYPE html>
<html>
<head>
<style>
.main *{ 
  border: 2px solid black;
  padding: 10px;
  margin: 15px;
}
</style>
<script src = "https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function fun(){
	$(document).ready(function(){
	  $("h4").parents().css({ "color": "blue", "border": "3px dashed blue"});
	});
}
</script>
</head>
<body class = "main"> body
  <div> div
    <ul> ul 
      <h4>  h4
          <p>  p </p>
      </h4>
    </ul>   
	</div>
<button onclick = "fun()"> 点击看看 </button>
  </body>
</html>

例2

使用ul过滤

<!DOCTYPE html>
<html>
<head>
<style>
.main *{ 
  border: 2px solid black;
  padding: 10px;
  margin: 15px;
}
</style>
<script src = "https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function fun(){
$(document).ready(function(){
  $("p").parents("ul").css({ "color": "blue", "border": "3px dashed blue"});
});
}
</script>
</head>
<body class = "main"> body
  <div> div
    <ul> ul 
      <h4>  h4
          <p>  p  </p>
      </h4>
    </ul>   
	</div>
<button onclick = "fun()"> 点击看看 </button>
  </body>
</html>

例3

选择多个

 <!DOCTYPE html>
<html>
<head>
<style>
.main *{ 
  border: 2px solid black;
  padding: 10px;
  margin: 10px;
}
</style>
<script src = "https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function fun(){
$(document).ready(function(){
  $("p").parents("ul, h4").css({ "border": "3px dashed blue"});
});
}
</script>
</head>
<body class = "main"> body
  <div> div
    <ul> ul 
      <h4>  h4
	  <div> div 
          <p> p
		  </p>
		  </div>
      </h4>
    </ul>   
	</div>
<button onclick = "fun()"> 点击看看 </button>
  </body>
</html>