2016-08-23 86 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

「有選擇器的幫手嗎?」不,沒有。選擇器是Web 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'); 
相關問題