CODEWITHSUNDEEP
javascript
Larry21
Larry21

Reputation: 171

check if (n)th elements contain class name

How to check if the first 3 li elements contain the class yes? Then, execute a function. Vanilla Js only, no 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>

Example logic:

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

Upvotes: 1

Views: 974

Answers (4)

Ultimater
Ultimater

Reputation: 4738

Add an id="ul" to the UL element then run:

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/

Upvotes: 0

dfsq
dfsq

Reputation: 193261

In addition to several great javascript solutions I will propose two more CSS-oriented options.

1). nth-child. You can try this approach with :nth-child to select first three children:

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

The idea is that li.yes will select elements with class "yes", and :nth-child(-n+3) makes sure that returned elements are the first three only. The result is a multiplication of those two conditions. Then we just need to check that returned result has length 3.

Demo: http://jsfiddle.net/b1oy0d6w/

2). sibling selectors. Or one more a little crazy version, but even shorter using sibling selector +:

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

The idea behind this approach:

  1. li.yes:first-child - check that the first li has class "yes"
  2. the next element has class "yes"
  3. and the next after the second (i.e. the third) element also has class "yes".

Entire selector ul li.yes:first-child + .yes + .yes then returns the third li element, only if above three conditions are met.

Demo: http://jsfiddle.net/b1oy0d6w/1/

Upvotes: 4

David Thomas
David Thomas

Reputation: 253307

One approach:

// 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');
}));


var firstThree = [].slice.call(document.querySelectorAll('li'), 0, 3);

console.log(firstThree.every(function(el) {
  return el.classList.contains('yes');
}));
<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>

References:

Upvotes: 2

hherman
hherman

Reputation: 1

Shouldnt be too tough, try:

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")
}

Upvotes: 0

Related Questions