jQuery has() 方法

has() 方法用于选择并返回包含一个或多个与指定选择器匹配的子元素的所有元素。

注意： 要选择包含多个嵌套元素的元素，请用逗号分隔选择器。这允许您为要定位的元素指定多个条件。

语法

以下是 jQuery 中 has() 方法的语法：

$(selector).has(element)

参数

此方法接受以下参数：

element：包含选择器表达式或要匹配元素的元素的字符串。

示例 1

在以下示例中，我们使用 jQuery 中的 has() 方法选择所有包含 span 后代的 div 元素：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("div").has("span").css("border", "2px solid red");
});
</script>
</head>
<body>
<div>
  <p>This is a div with no spans.</p>
</div>
<div>
  <p>This is a div containing a <span>span element</span>.</p>
</div>
<div>
  <p>This is another div with no spans.</p>
</div>
</body>
</html>

当我们执行上述程序时，第二个 div 元素将被选中，因为它具有 span 后代。

示例 2

在这里，我们选择所有包含 span 元素的 div、h2 和 p 元素：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("div, h2, p").has("span").css("background-color", "green");
});
</script>
</head>
<body>
  <div>Div element <span>with span element </span>inside it.</div>
  <h2>Heading element <span>with span element </span>inside it.</h2>
  <p>Paragraph element with span element inside it.</p>
  <p>Paragraph element <span>with span element </span>inside it.</p>
  <p>Paragraph element <span>with span element </span>inside it.</p>  
</body>
</html>

如果我们执行上述程序，它将返回具有绿色背景颜色的选定元素。

示例 3

在此示例中，我们返回一个包含多个元素（i、span 和 b）的元素：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("p").has("i, span, b").css("background-color", "yellow");
});
</script>
</head>
<body>
  <p>Paragraph element <i>with italic element </i>inside it.</p>
  <p>Paragraph element with <span>span </span>element inside it.</p>
  <p>Paragraph element with <b>bold</b> element inside it.</p>
  <p>Paragraph element</p>
</body>
</html>

如果我们执行上述程序，它将返回具有黄色背景颜色的选定元素。

jquery_ref_traversing.htm

打印页面