Check if an element contains a regex class with class List

Question

I have a simple list of items that look 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 choose a list

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

Finally, inside the loop, for..inI want to extract the class name 'item-*'. Since I want to do this without jQuery or other libraries, I wonder how I can do this in the most elegant way, something like

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

Please inform.

Answer 1

You can check if some(ES5) matches regExp class:

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 the arrow functions , you can simplify this for

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

var items = document.getElementsByClassName('items-list')[0];
  for (var i = 0, len = items.children.length; i < len; i++) {
    if (/item-/.test(items.children[i].className)) {
      console.log(items.children[i].className);
      // or doSomething();
  }
}

http://jsfiddle.net/tcs6b/ ?