has()
筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素。
.has(selector)
- selector类型: String。一个用于匹配元素的选择器字符串。
.has(contained)
- contained类型: Element。用于匹配元素的DOM元素。
如果提供一个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');
- list item 1
- list item 2
- list item 2-a
- list item 2-b
- list item 3
- list item 4
结果是 item 2 背景变成了红色,因为只有这个<li>
含有<ul>
后代。
例子
检测是否一个元素在另一个之内。
<!DOCTYPE html> <html> <head> <style> .full { border: 1px solid red; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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>
- Does the UL contain an LI?