Question

我正在重写一些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)时，情况就会崩溃。我错过了什么？

Answer 1

重新排列选择器，如下所示：

var modules = document.querySelectorAll('.main .module:not(#exclude)');

然后filter() .module .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>

在vanilla JS中，如何将querySelectorAll与2个伪选择器一起使用？

1 个答案:

演示