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

hungryphilomath 发表于 Dev

饥饿费

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

对于元素：

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

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

杜沙尔

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

注意，\b在正则表达式中是单词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>

获取班级名称列表

选择foobar在class属性值中任意位置包含的元素。
使用match()得到的className，如果它包含它。
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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。