我正在将一些 jQuery 重写为 vanilla JS - 它看起来像这样:
$('.main-container').children('.module:has(a)').not('#promo');
我尝试过的:
document.querySelectorAll('.main-container .module:has(a):not(#promo)');
但是在一个语句中使用两个伪选择器让我感到困惑。仅使用 :not(#promo)
选择器就可以正常工作:
document.querySelectorAll('.main-container .module:not(#promo)');
但是当我尝试添加 :has(a)
时,事情就崩溃了。我错过了什么?
最佳答案
像这样重新排列选择器:
var modules = document.querySelectorAll('.main .module:not(#exclude)');
然后对 .module
进行 filter()
,该 .contains(a)
查看演示并让我知道 HTML 是否正确,因为它尚未发布
演示
应排除索引 2、5 和 9
var modules = Array.from(document.querySelectorAll('.main .module:not(#exclude)'));
var hasA = modules.filter(function(module, index, hasA) {
let a = module.querySelector('a');
return module.contains(a);
});
hasA.map(function(module, index, hasA) {
module.insertAdjacentText('beforeend', ' INCLUDED');
return console.log(`module ${index}: ${module.textContent}`);
});
.as-console-wrapper {
width: 60%;
margin-left: 40%;
min-height: 100%;
}
<ol class='main' start='0'>
<li class='module'><a href='#/'>LINK</a></li>
<li class='module'><a href='#/'>LINK</a></li>
<li id='exclude' class='module'>
<a href='#/'>LINK</a>
</li>
<li class='module'><a href='#/'>LINK</a></li>
<li class='module'><a href='#/'>LINK</a></li>
<li class='component'>
<a href='#/'>LINK</a>
</li>
<li class='module'><a href='#/'>LINK</a></li>
<li class='module'><a href='#/'>LINK</a></li>
<li id='include' class='module'>
<a href='#/'>LINK</a>
</li>
<li class='module'>NO LINK</li>
</ol>
关于javascript - 在 vanilla JS 中,如何将 querySelectorAll 与 2 个伪选择器一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47420633/