javascript - 选择类以特定字符串结尾的元素

Question

这可能以前已经回答过，但我不知道如何正确表达。

对于元素:

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

如何获取以“foobar”结尾的类的名称？所以对于“div1”我想得到一个字符串“1foobar”，对于“div2”我想得到字符串“2foobar”。

Answer 1

1. 选择其 class 属性值包含所需字符串的所有元素。 $('[class*="foobar"]') 选择器将选择 foobar 在 class 属性值中的任何位置的所有元素.
2. 过滤类名以它结尾的元素。使用 filter() 和 RegEx /foobar\b/ 将过滤掉类以 foobar 字符串结尾的元素。

请注意，正则表达式中的 \b 是 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.com/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>

---

获取类名列表

1. 选择 class 属性值中任意位置包含 foobar 的元素。
2. 使用 match() 获取类名，如果它包含的话。
如果在字符串中找不到匹配项，
3. match() 将返回 null，否则它将返回一个包含匹配项的数组。第一项(第零个索引)是感兴趣的类名。

$('[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.com/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>