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

Posted 2023-03-06

【中文标题】如何使用jquery选择具有特定字符串的类开头和结尾的元素？

【英文标题】：How to select element has class start and end with specific string using jquery?

【发布时间】：2017-06-18 06:02:03

【问题描述】：

我有几个使用类的 div

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

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

最好的问候。

【问题讨论】：

http://***.com/questions/5110249/wildcard-in-css-for-classes 的副本。

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

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

【参考方案1】：

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

$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>

【讨论】：

这只会选择.wrap-3-addon-1 元素。 （没有.wrap-2-addon-1，没有.wrap-2-addon-1）

这只是一个例子，你可以用正则表达式测试它

无需针对正则表达式进行测试。 .wrap-3-addon-1 已被选中（单独）。

【参考方案2】：

这可能会对你有所帮助，我使用正则表达式来解析当前元素的类是否适合所需的模式。

我假设您要检查的课程超过 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>

【参考方案3】：

从这个answer 启发正则表达式匹配：

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>

【参考方案4】：

您可以结合两个 jquery Attribute Starts With Selector [name^=”value”] 和 Attribute Ends With Selector [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>

【讨论】：

我曾尝试使用.hasClass 或.is 来采纳您的回答，但它不起作用。你有什么建议吗？ jsbin.com/qomubezoti/1/edit?js,console,output

如果元素上有其他类，这将不起作用，因为 class 属性不会按预期开始和结束：<div class="foo wrap-1-addon-1"> <div class="wrap-1-addon-1 bar">

【参考方案5】：

你可以使用starts with selector:

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

JsFiddle demo

【参考方案6】：

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

例子：

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