jQuery :has()选择器

:has()选择器语法

$('selector:has(ele1, ele2,...eleN)')

:has()选择器语法解析

如上语法，jQuery中的:has()选择器可以选择所有包含一个或多个:has()中参数指定的元素的元素。比如，p:has(span)则匹配包含span元素的p元素。参数中的元素不一定只是原生的HTML元素，也可以是类或id等其它选择器，个数不限，使用英文逗号隔开。

免责声明：如果selector选择器，比如div选择器所匹配的div中包含的子元素的子元素中也存在:has()中参数指定的子元素，那么该div也会被选择，而且不管是嵌套了多少层的子元素。

:has()选择器实例代码

下方的实例中，使用:has()选择器匹配选择具有类属性值为x1y1z1的子元素的元素，并将其text-align属性设置为center，即让其内部的子元素居中显示（之所以选择使用class属性值d1来代替div作为:has()选择器之前的selector，主要是考虑到当前的div也是当前页面——在线编辑器之外的其它的div的子元素，也就是说，如果直接使用div，那么编辑器之外的其它的div也会被匹配选择）：

<div class="d1">
  <p class="x1y1z1">HELLO</p>
</div>

<div class="d1">
  <p>world</p>
</div>
<button id="test">笨鸟工具</button>

<script>
$("#test").click(function(){
  $(".d1:has(.x1y1z1)").css("text-align","center")
})
</script>

免责声明：内容仅供参考，不保证正确性！

hot：热门