:has(selector)
保留包含特定后代的元素,去掉那些不含有指定后代的元素。
-
1.1.4 新增:has(selector)
selector (Selector) 一个用于匹配元素的选择器字符串。
如果提供一个jQuery对象代表DOM元素集合, .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');
结果是 item 2 背景变成了红色,因为只有这个 <li>
含有 <ul>
后代。
示例:
检测是否一个元素在另一个之内。
<!DOCTYPE html>
<html>
<head>
<style>
.test{ border: 3px inset red; }
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div><p>Hello in a paragraph</p></div>
<div>Hello again! (with no paragraph)</div>
<script>
$("div:has(p)").addClass("test");
</script>
</body>
</html>