jQuery 遍历 - has() 方法 概述
jQuery 2022-06-01 17:59:11小码哥的IT人生shichen
jQuery 遍历 - has() 方法
实例
检测某个元素是否在另一个元素中：
$("ul").append("<li>" + ($("ul").has("li").length ? "Yes" : "No") + "</li>");
$("ul").has("li").addClass("full");
完整实例：
<!DOCTYPE html>
<html>
<head>
<style>
.full { border: 1px solid red; }
</style>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<ul><li>Does the UL contain an LI?</li></ul>
<script>
$("ul").append("<li>" + ($("ul").has("li").length ? "Yes" : "No") + "</li>");
$("ul").has("li").addClass("full");
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
has() 将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集。
语法
.has(selector)
| 参数 | 描述 |
|---|---|
| selector | 字符串值，包含匹配元素的选择器表达式。 |
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.has() 方法用匹配元素的子集来构造一个新的 jQuery 对象。所使用的选择器用于检测匹配元素的后代；如果任何后代元素匹配该选择器，该元素将被包含在结果中。
请思考下面这个带有嵌套列表的页面：
<ul>
<li>list item 1</li>
<li>list item 2
<ul>
<li>list item 2-a</li>
<li>list item 2-b</li>
</ul>
</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
我们可以对列表项集合应用该方法，就像这样：
$('li').has('ul').css('background-color', 'red');
完整实例：
<!DOCTYPE html>
<html>
<head>
<style>
.full { border: 1px solid red; }
</style>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2
<ul>
<li>list item 2-a</li>
<li>list item 2-b</li>
</ul>
</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
<script>
$('li').has('ul').css('background-color', 'red');
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
该调用的结果是，项目 2 的背景被设置为红色，这是因为该项目是后代中唯一拥有 <ul> 的 <li>。
