javascript - 检查第 (n) 个元素是否包含类名

Question

如何检查前 3 个 li 元素是否包含 yes 类？然后，执行一个函数。只有 Vanilla Js，没有 jquery。

<ul>
  <li class="yes">blah blah</li>
  <li class="yes">blah blah</li>
  <li class="yes">blah blah</li>
  <li class="no">blah blah</li>
  <li class="no">blah blah</li>
  <li class="yes">blah blah</li>
  <li class="yes">blah blah</li>
</ul>

示例逻辑:

if (li[0] && li[1] && li[2] has class = yes) {
    alert("You win!");
}
else{
    alert("You lose!");
}   

Answer 1

除了几个很棒的 javascript 解决方案之外，我还将提出两个面向 CSS 的选项。

1).第 n 个 child 。您可以使用 :nth-child 尝试这种方法选择前三个 child :

var li = document.querySelectorAll('ul li.yes:nth-child(-n+3)');
if (li.length === 3) {
    // all three first elements has class "yes"
}

想法是 li.yes 将选择类为“yes”的元素，而 :nth-child(-n+3) 确保返回的元素是只有前三个。结果是这两个条件的乘积。然后我们只需要检查返回结果的长度是否为 3。

演示:http://jsfiddle.net/b1oy0d6w/

2).兄弟选择器。或者还有一个有点疯狂的版本，但使用同级选择器更短 + :

if (document.querySelector('ul li.yes:first-child + .yes + .yes')) {
    // all three first elements has class "yes"
}

这种方法背后的想法:

1. li.yes:first-child - 检查第一个 li 是否有类“yes”
2. 下一个元素的类是“yes”
3. 第二个(即第三个)元素之后的下一个元素也有类“yes”。

整个选择器 ul li.yes:first-child + .yes + .yes 然后返回第三个 li 元素，只有满足以上三个条件。

演示:http://jsfiddle.net/b1oy0d6w/1/