2016-08-23 3 views
2

Я хочу проверить, имеет ли какой-либо элемент в NodeList определенный класс.Проверьте, не имеет ли какой-либо элемент в NodeList определенный класс с использованием ES6

Например, с помощью JQuery я просто делаю что-то вроде:

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

только с Javascript я мог бы сделать, но с немного более кодом:

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

 
items.forEach(function(item, index) { 
 
    if(item.className.indexOf('active') > 0) { 
 
\t 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>

Как могу ли я сделать это с помощью ES6? Есть помощник для селекторов?

Спасибо!

+2

«Есть помощник для селекторов?» Нет, нет. Селекторы являются частью веб-API, JS не поддерживает селекторов. – Teemu

+3

ES6 (ES2015 сейчас) действительно не имеет ничего общего с операциями DOM или селекторами CSS; это функции браузера. – Pointy

ответ

3

Это не имеет ничего общего с ES2015, но вы можете использовать document.querySelector() так же, как основной JQuery API:

var isActive = document.querySelector(".item.active") != null; 
4
Array.from(document.getElementsByClassName("item")).some(({classList}) => 
    classList.contains('active')) 

, вероятно, лучший ES6 может дать вам, что по существу совпадает с вашим кодом выше.

+0

Я думаю, что 'el => el.classList. ...' более идиоматично, чем разрушать здесь – Bergi

2

Вам не нужно ES6 делать то же самое в ванили JS.

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

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