javascript - jQuery :has() equivalent using document. 查询选择器

Question

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

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

使用 jQuery 会很简单:

$("p:has(a)")

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

提前致谢。

Answer 1

:has('selector') 在 vanilla JS 中的等价物基本上是 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/