主页 / 问题 / 668401
Accepted
Eugen Eray
Asked:2020-05-20 17:01:14 +0000 UTC2020-05-20 17:01:14 +0000 UTC

如何正确编写以下 JavaScript 选择器 [不是 jQuery]

  • 772

我想写一个这样的选择器：

document.querySelectorAll(".smallinnertable:not(:has(a))");

适用于 jQuery，但不适用于纯 JS。这样的选择器是非常有必要的。谢谢您的帮助。

javascript

2 个回答

  1. Best Answer

    不太可能有完全简单的事情。毕竟，即使是一个漂亮而棘手的选择器过滤器也是用Jquery编写的。

    因此，作为一种选择，您可以自己写一些东西。例如这样的事情：

    function getElementHasNotAnother(selector, filterEl) {
    var divs = document.querySelectorAll(selector),
    filter   = Array.prototype.filter;
    
    return filter.call( divs, function( node ) {    	
        return node.querySelectorAll(filterEl).length == 0;
    });        
}

var result = getElementHasNotAnother('.smallinnertable', 'a');

/*********** check *************************/
for (var el in result) {
	console.log(result[el].textContent);
}
    <div class="smallinnertable">1231</div>
<div class="smallinnertable">werjhwer</div>
<div class="smallinnertable">879879</div>
<div class="smallinnertable">4 <a href="">34</a></div>

    • 5 
  2. document.querySelectorAll(".smallinnertable:not(:has(a))");

    首先，您需要选择.smallinnertable，然后将所有具有以下内容的人都扔掉a：

    console.log(
  Array.prototype.filter.call(
    document.querySelectorAll(".smallinnertable"),
    function (el) { return !el.querySelector("a") }
  )
)
    <div class="smallinnertable">1231</div>
<div class="smallinnertable">werjhwer</div>
<div class="smallinnertable">879879</div>
<div class="smallinnertable">4 <a href="">34</a></div>

    css 上还没有类似的东西，所以只是过滤。
    好吧，如果选择器在has复合选择器中，请小心。

    • 1

相关问题