jQuery :has() 等效于使用 document.querySelector

Question

正如我在主题中所写的 - 我正在寻找一个使用 document.querySelector 等效的 jQuery :has() 选择器。

例如，我想选择包含链接的所有段落：

使用 jQuery，一切都会变得简单：

$("p:has(a)")

如何使用 javascript 的 document.querySelector 来实现这一点？

提前致谢。

Answer 1

vanilla JS 中的等效项:has('selector')基本上与 jQuery 扩展中发生的情况相同：匹配选择器，然后过滤掉不返回子选择器匹配的元素：

[].filter.call( document.querySelectorAll('p'), function( elem ){
   return elem.querySelector('a')
});

或者更通用的函数：

var querySelectorHas = function( parent, child ){
   return [].filter.call( document.querySelectorAll( parent ), function( elem ){
       return elem.querySelector( child )
   });
}

http://jsfiddle.net/jer5xde5/

Answer 2

正如jquery 文档中所述

由于 :has() 是 jQuery 扩展，而不是 CSS 规范的一部分，因此使用 :has() 的查询无法利用本机 DOM querySelectorAll() 方法提供的性能提升

没有本地等效项。