javascript - Select elements whose class ends with particular string - Stack Overflow

admin管理员组

文章数量:1403123

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

Share Improve this question Follow edited Aug 22, 2016 at 15:49 Tushar 87.3k2121 gold badges163163 silver badges181181 bronze badges asked Aug 22, 2016 at 15:41 hungryphilomathhungryphilomath 4111 silver badge55 bronze badges 1

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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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>

本文标签： javascriptSelect elements whose class ends with particular stringStack Overflow