用classList的正则表达式检查一个元素是否包含一个类 [英] Check if an element contains a class by regex with classList

问题描述

 < 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（）
  

请指教。

解决方案

您可以检查 一些 （ES5） （c）{返回/返回类型匹配您的regExp：

  if（item.className.split（''）.some（function（c）{return /如果（[]。some.call（item.classList，function（c））* /。test（c）;}））
 do_something（）
 / *或* / 
 ）{return /item-.*/.test(c）;}））
 do_something（）
  

或者，在ES6中，使用箭头功能

a>，您可以简化为

  if（item.className.split（''）.some（c => /item-.*/.test(c）））
 do_something（）
 / *或* / 
 if（[]。some.call（item.classList，c => /item-.*/.test(c）））
 do_something（）
  

但是当然，如果你想获得最大的性能，请使用循环：

  for（var i = 0，l = item.classList。如果（/ item  - 。* /。test（item.classList [i]））{
 do_something（）;}; 
休息; 
} 
} 
  

I have a simple list of elements looking like this:

<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>

I select the list by

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

Finally inside a for..in loop I want to extract class name that is 'item-*'. As I want to make it without jQuery or other libraries, I wonder how I can do it in the most elegant way, something like

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

Please advise.

解决方案

You can check if some (ES5) class matches your 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()

Or, in ES6, using arrow functions, you can simplify that to

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

But of course, if you want maximum performance, use a loop:

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

这篇关于用classList的正则表达式检查一个元素是否包含一个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！