使用 ES6 检查 NodeList 中的任何元素是否具有特定的 class

Question

我想检查 NodeList 中的任何元素是否具有特定的 class。

例如，使用 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) {
 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 执行此操作？有选择器的帮手吗？

谢谢！

Answer 1

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

可能是 ES6 可以给你的最好的，它与你上面的代码基本相同。

Answer 2

它与 ES2015 无关，但您可以像基本的 jQuery API:

一样使用 document.querySelector()

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

Answer 3

你真的不需要 ES6 在 vanilla JS 中做同样的事情。

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

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

Answer 4

您可以 .find() 节点列表和 return 第一个真实结果。

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

使用 ES6 检查 NodeList 中的任何元素是否具有特定的 class

Check if any element in a NodeList has a specific class using ES6

javascript

jquery-selectors

ecmascript-6