Question

如何检查前3个 li 元素是否包含是类？然后，执行一个功能。只有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个孩子即可。您可以使用:nth-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将选择带有类＆＃34;是＆＃34;和: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"
}

这种方法背后的想法：

li.yes：first-child - 检查第一个li是否有课程＆＃34;是＆＃34;
下一个元素有类＆＃34;是＆＃34;
和第二个（即第三个）元素之后的下一个元素也有类＆＃34;是＆＃34;。

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

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

Answer 2

一种方法：

// storing an Array of the first three <li> elements returned by
// document.querySelectorAll():
var firstThree = [].slice.call(document.querySelectorAll('li'), 0, 3);

// logging whether or not every (using Array.prototype.every())
// Array element's classList contains the class of 'yes':
console.log(firstThree.every(function(el) {
  return el.classList.contains('yes');
}));

＆＃13;

var firstThree = [].slice.call(document.querySelectorAll('li'), 0, 3);

console.log(firstThree.every(function(el) {
  return el.classList.contains('yes');
}));

＆＃13;

<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>

＆＃13;

参考文献：

Answer 3

将id="ul"添加到UL元素，然后运行：

var el=document.getElementById('ul');
var li=el.getElementsByTagName('li');
if(
/ yes /.test(' '+li[0].className+' ')&&
/ yes /.test(' '+li[1].className+' ')&&
/ yes /.test(' '+li[2].className+' ')
){
alert('you win');
}else{
    alert("You lose!");
}

http://jsfiddle.net/k9sev1hq/

Answer 4

不应该太强硬，旅行>

var answer = true
var lis = document.querySelectorAll("ul > li") // Gets all the <lis> in all the uls
var classes = lis.map(function (e) {return e.className} //list of classnames
for (e in classes.splice(0,3)) { // runs a function on each of the first 3 elements
    answer = (e == "yes") && answer // if any of the elements isnt "yes", answer will become false
}
if (answer) {
    alert("You win!!!!!!!")
} else {
    alert("You lose")
}

检查第（n）个元素是否包含类名

4 个答案:

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

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