如何使用jQuery选择具有以特定字符串开头和结尾的类的元素？

Question

我有几个使用类似的class名称的div：

• .wrap-1-addon-1
• .wrap-2-addon-1
• .wrap-3-addon-1

我想选择所有这些div，并使用 if ($(this).hasClass()) 检查它是否是其中之一。目前，我只检查单个类。如何检查所有这些类，例如 .hasClass('wrap-*-addon-1') ？

最好的问候。

- Marian Rick

---

重复的问题：https://dev59.com/l2435IYBdhLWcg3w9FLi。 - ibrahim mahrir

如果你想避免严重的性能问题，那么你可以考虑将类应用于你的元素，例如 <div class="wrap wrap-1-addon-1"></div><div class="wrap wrap-2-addon-1"></div> 并简单地针对 wrap 进行目标定位。不确定你的系统中有多少这样的情况，但通配符和正则表达式会使你的应用程序在某些时候变得缓慢，并且硬编码每个可能的组合是疯狂的。 - MonkeyZeus

@MonkeyZeus 感谢您的建议。不幸的是，该代码是由第三方插件生成的，其提供了有限的自定义代码的可能性，而不会失去未来更新的兼容性。 - Marian Rick

Answer 1

您可以结合两个jquery属性开始于选择器[name^=”value”]和属性结束于选择器[name$=”value”]来完成此工作。

$('div[class^="wrap-"][class$="-addon-1"]')

$('div[class^="wrap-"][class$="-addon-1"]').css("color", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-1-addon-1">wrap-1-addon-1</div>
<div class="wrap-2-addon-1">wrap-2-addon-1</div>
<div class="wrap-3-addon-1">wrap-3-addon-1</div>
<div class="wrap-3-addon-2">wrap-3-addon-2</div>

- Mohammad

---

我已经尝试使用.hasClass或.is来采纳您的答案，但它不起作用。您有什么建议吗？http://jsbin.com/qomubezoti/1/edit?js,console,output - Marian Rick

如果元素上有其他类，则此方法将无法正常工作，因为“class”属性不会按预期开始和结束：<div class="foo wrap-1-addon-1"> <div class="wrap-1-addon-1 bar"> - Kris Paulsen

Answer 2

您可以使用属性开始选择器：

$('div[class^="wrap"]')

JsFiddle demo

- urbz

Answer 3

你可以使用支持多个类的.is()，但不幸的是.hasClass()一次只能检查一个类。

示例：

element.is('.wrap-1-addon-1, .wrap-2-addon-1, .wrap-2-addon-1')

- Radex

Answer 4

最好添加另一个类，并使用该类进行选择。然后可以使用正则表达式进行测试。

$el = $(".wrap");

$el.each(function() {
  var test = /wrap-[1-3]-addon-1/.test($(this).attr("class"));
  $(".result").html(test);
  console.log(test);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-1-addon-1 wrap"></div>
<div class="wrap-2-addon-1 wrap"></div>
<div class="wrap-3-addon-1 wrap"></div>
  
<div class="result"></div>

- İzzet Altınel

---

这将仅选择.wrap-3-addon-1元素。（没有.wrap-2-addon-1，没有.wrap-2-addon-1） - ibrahim mahrir

这只是一个例子，你可以使用正则表达式进行测试。 - İzzet Altınel

没有必要针对正则表达式进行测试。.wrap-3-addon-1已经被选中（独自）。 - ibrahim mahrir

Answer 5

以下是一篇启发性的正则表达式匹配的答案：

var $ele = $("div:first");

alert(matchRule($ele.attr('class'),'wrap-*-addon-1'))


function matchRule(str, rule) {
  return new RegExp("^" + rule.split("*").join(".*") + "$").test(str);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="wrap-1-addon-1">
</div>
<div class="wrap-2-addon-1">
</div>
<div class="wrap-3-addon-1">
</div>

- Developer

Answer 6

这可能会对您有所帮助，我使用正则表达式来确定当前元素的类是否符合所需的模式。

我假设您有超过3个类需要检查。 这个模式适用于wrap-1-addon-1到wrap-n-addon-1，n是某个数字。

function hasMyClass(elm) {
  
var regex = /(wrap-)+(\d)+(-addon-1)/i;// this is the regex pattenr for wrap-*-addon-1
  
var $this = $(elm);
var myClassesStr = $this.attr('class');
if(myClassesStr) { // if this has any class
  var myClasses = myClassesStr.split(' '); // split the classes
  for(i=0;i<myClasses.length;i++) { // foreach class
      var myClass = myClasses[i]; // take one of classes
      var found = myClass.match(regex); // check if regex matches the class
    
      if(found) {
          return true;
        }
    }
}
  
return false;
}



function test() {
    $('#container div').each(function(){
      var $this = $(this);
      $('#pTest').append('<br/>test result for ' + $this.attr('id') + ':' + hasMyClass(this)); 
      // hasMyClass(this) is the sample usage
    })
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="div1" class="wrap-1-addon-1 anotherClass">div1 (wrap-1-addon-1)</div>
  <div id="div2"  class="wrap-2-addon-1 anotherClass anotherClass2">div2 (wrap-2-addon-1)</div>
  <div id="div3"  class="wrap-3-addon-1 anotherClass">div3 (wrap-3-addon-1)</div>
  <div id="div4"  class="anotherClass">div4 (none)</div>
</div>
<button id="testBtn" onclick="test();" type="button">TEST</button>

<p id="pTest" >...</p>

- er-han