检查元素是否包含带有classList的正则表达式的类

Question

我有一个简单的元素列表,如下所示:

<ul class="items-list">
  <li class="item item-1"></li>
  <li class="item item-2"></li>
  <li class="item item-3"></li>
  <li class="item item-4"></li>
</ul>

我选择列表

items = document.getElementsByClassName('items-list')[0]

最后在for..in循环中我想提取类名'item-*'.因为我想在没有jQuery或其他库的情况下制作它,我想知道如何以最优雅的方式做到这一点,比如说

if (item.classList.contains('item-.*'))
  do_something()

请指教.

Answer 1

您可以检查some(ES5)类是否与您的regExp匹配:

if(item.className.split(' ').some(function(c){ return /item-.*/.test(c); }))
  do_something()
/* or */
if([].some.call(item.classList, function(c){ return /item-.*/.test(c); }))
  do_something()

或者,在ES6中,使用箭头功能,您可以简化为

if(item.className.split(' ').some(c => /item-.*/.test(c)))
  do_something()
/* or */
if([].some.call(item.classList, c => /item-.*/.test(c)))
  do_something()

但是,当然,如果您想获得最大性能,请使用循环:

for (var i=0, l=item.classList.length; i<l; ++i) {
    if(/item-.*/.test(item.classList[i])) {
        do_something();
        break;
    }
}

Answer 2

您可以使用正则表达式来测试 className 是否包含item-

if (/item-/.test(item.className)) {
  // ...
}