如何使用小于父项的第三个子项且不是某个 class 的 li 元素执行 querySelectorAll？

Question

假设我有一个 ul 这样的：

<ul>
   <li class="good"></li>
   <li class="bad"></li>
   <li class="bad"></li>
   <li class="bad"></li>
   <li class="bad"></li>
   <li class="good"></li>
   <li class="bad"></li>
   <li class="bad"></li>
   <li class="bad"></li>
   <li class="bad"></li>
   <li class="good"></li>
   <li class="bad"></li>
   <li class="bad"></li>
</ul>

我想 select ul 元素的所有子元素小于第八个子元素（所以第一个 7 个）并且没有 class bad。

我想做类似的事情 querySelectorAll('ul li:not(:nth-child(n+3)) li:not(.bad)') 我有办法做到这一点吗？

Answer 1

我不认为你可以只用 CSS 来完成 "less than 8th"，但你可以将 NodeList 从 querySelectorAll 转换成一个数组，然后只获取前七个通过 .slice(0, 7)，然后 filter 排除那些你不想要的 class（我认为在你的样本数据中 bad）：

const list = [...document.querySelectorAll("ul.unstyled li")]
                .slice(0, 7)
                .filter(li => !li.classList.contains("bad"));

实例：

const list = [...document.querySelectorAll("ul.unstyled li")].slice(0, 7).filter(li => !li.classList.contains("bad"));

for (const li of list) {
    console.log(li.textContent);
}

<ul class="unstyled">
   <li class="good">0</li>
   <li class="bad">1</li>
   <li class="bad">2</li>
   <li class="bad">3</li>
   <li class="bad">4</li>
   <li class="good">5</li>
   <li class="bad">6</li>
   <li class="bad">7</li>
   <li class="bad">8</li>
   <li class="bad">9</li>
   <li class="good">10</li>
   <li class="bad">11</li>
   <li class="bad">12</li>
</ul>

以上假定 NodeList 在您的浏览器上是可迭代的，就像在大多数浏览器上一样。如果不是，但您的环境支持 ES2015+，您可以使用轻松填充它。或者，直接使用 Array.prototype.slice，就像这个 ES5 示例中的那样：

var list = Array.prototype.slice.call(
                document.querySelectorAll("ul.unstyled li"),
                0, 7
            ).filter(function(li) { return !li.classList.contains("bad"); });

Answer 2

这对我有用：

document.querySelectorAll("ul li:not(:nth-child(n+8)):not(.bad)");

如何使用小于父项的第三个子项且不是某个 class 的 li 元素执行 querySelectorAll？

How to execute querySelectorAll with li elements that are less than the third child of the parent and not of a certain class?

javascript

css

jquery-selectors