This has probably been answered before but I don't know how to phrase it properly.

For elements:

<div id='div1' class="class1 1foobar"></div>
<div id='div2' class="class1 class2 2foobar"></div>

How do I get the NAME of the class ending with 'foobar'? So for 'div1' I want to get a string '1foobar' and for 'div2' I want to get string '2foobar'.

This has probably been answered before but I don't know how to phrase it properly.

For elements:

<div id='div1' class="class1 1foobar"></div>
<div id='div2' class="class1 class2 2foobar"></div>

How do I get the NAME of the class ending with 'foobar'? So for 'div1' I want to get a string '1foobar' and for 'div2' I want to get string '2foobar'.

• javascript
• jquery

• check out get-class-list-for-element-with-jquery – EvilEpidemic Commented Aug 22, 2016 at 15:43

1 Answer 1

1. Select all the elements whose class attribute value contains the required string. $('[class*="foobar"]') selector will select all the elements for which foobar is anywhere in the class attribute value.
2. filter the elements with the class name ending with it. Using filter() and RegEx /foobar\b/ will filter out the elements whose class/es ends with foobar string.

Note that \b in the regex is word boundary.

$('[class*="foobar"]').filter(function() {
    return /foobar\b/.test($(this).attr('class'));
}).css('background', 'green');

div {
  height: 50px;
  width: 50px;
  margin: 5px;
  background: red;
  float: left;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class2 2foob ar"></div>
<div id='div1' class="class1 1foobar"></div>
<div id='div2' class="class1 class2 2foobar"></div>

<div class="class1 class2 2foo bar"></div>

To get the class name list

1. Select elements containing foobar anywhere in the class attribute value.
2. Use match() to get the className, if it contains it.
3. match() will return null if no match is found in the string, else it'll return an array containing matches. The first item(at zero-th index) is the interested classname.

$('[class*="foobar"]').each(function () {
    var className = $(this).attr('class').match(/\S*foobar\b/i);
    if (className) {
        console.log(className[0]);
    }
});

$('[class*="foobar"]').each(function() {
  var className = $(this).attr('class').match(/\S*foobar\b/i);
  if (className) {
    console.log(className[0]);
  }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class2 2foob ar"></div>
<div id='div1' class="class1 1foobar"></div>
<div id='div2' class="class1 class2 2foobar"></div>

<div class="class1 class2 2foo bar"></div>