I want to check if any element in a NodeList has a specific class.

For example, with jQuery I just do something like:

//if any .item element has active class, return true
var isActive = $(".item").hasClass("active"); 

Only with Javascript I could do, but with a slightly longer code:

var isActive = false;
var items = Array.from(document.getElementsByClassName("item"));

items.forEach(function(item, index) {
  if(item.className.indexOf('active') > 0) {
	isActive = true;
  }
});

alert(isActive);

<div class="item">1</div>
<div class="item">2</div>
<div class="item active">3</div>
<div class="item">4</div>

I want to check if any element in a NodeList has a specific class.

For example, with jQuery I just do something like:

//if any .item element has active class, return true
var isActive = $(".item").hasClass("active"); 

Only with Javascript I could do, but with a slightly longer code:

var isActive = false;
var items = Array.from(document.getElementsByClassName("item"));

items.forEach(function(item, index) {
  if(item.className.indexOf('active') > 0) {
	isActive = true;
  }
});

alert(isActive);

<div class="item">1</div>
<div class="item">2</div>
<div class="item active">3</div>
<div class="item">4</div>

How can I do this with ES6? There is a helper for selectors?

Thanks!

• javascript
• jquery-selectors
• ecmascript-6

• 2 "There is a helper for selectors?" No, there isn't. Selectors are a part of Web APIs, JS has no support for selectors. – Teemu Commented Aug 23, 2016 at 14:24
• 3 ES6 (ES2015 now) really doesn't have anything to do with DOM operations or CSS selectors; those are browser environment features. – Pointy Commented Aug 23, 2016 at 14:24

4 Answers 4

Array.from(document.getElementsByClassName("item")).some(({classList}) =>
   classList.contains('active'))

is probably the best ES6 can give you, which is essentially the same as your code above.

It has nothing to do with ES2015, but you can use document.querySelector() much like the basic jQuery API:

 var isActive = document.querySelector(".item.active") != null;

You don't really need ES6 to do the same thing in vanilla JS.

// jQuery
var isActive = $(".item").hasClass("active"); 

// Plain JavaScript
var isActive = document.querySelector('.item').classList.contains('active');

You can .find() on a nodelist and return the first true result.

const activeEl = Array.prototype.find.call (items, item => item.classList.contains('active'));