How to select element has class start and end with specific string using jquery?

Question

I got several divs using classes like

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

I want to select all of them and use if ( $(this).hasClass() ) to check if its one of them. Currently I only do check for a single class. How can I check all of these, for example .hasClass('wrap-*-addon-1')?

Best regards.

Duplicate of [http://stackoverflow.com/questions/5110249/wildcard-in-css-for-classes](http://stackoverflow.com/questions/5110249/wildcard-in-css-for-classes). — ibrahim mahrir, Feb 01 '17 at 13:42
If you want to avoid serious performance issues then you might consider applying classes to your elements like this `
` and simply target the `wrap`. Not sure how many of these are possible in your system but wildcards and regex will make your app sluggish at some point and hardcoding every possible combination would be insanity. — MonkeyZeus, Feb 01 '17 at 21:48
@MonkeyZeus thanks for the suggestion. Sadly the code is generated by a third party plugin which offers limited possibilities to customize code without loosing future updates compatibility. — Marian Rick, Feb 02 '17 at 09:29

score 23 · Accepted Answer · answered Feb 01 '17 at 13:17

23

You can combine two jquery Attribute Starts With Selector [name^=”value”] and Attribute Ends With Selector [name$=”value”] to do this work.

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

answered Feb 01 '17 at 13:17

Mohammad

21,175
15
55
84

I have tried to adopt your answer using `.hasClass` or `.is` as questioned, but it does not work. Do you got a suggestion why? http://jsbin.com/qomubezoti/1/edit?js,console,output – Marian Rick Feb 02 '17 at 14:22
This won't work if there are other classes on the element as the `class` attribute won't start and end as expected: `

`
– Kris Paulsen Nov 12 '21 at 19:42

score 5 · Answer 2 · answered Feb 01 '17 at 13:14

5

You can use starts with selector:

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

JsFiddle demo

answered Feb 01 '17 at 13:14

urbz

2,663
1
19
29

score 4 · Answer 3 · answered Feb 01 '17 at 13:13

4

You could use .is() which support multiple classes, unfortunately .hasClass() works only for one class at a time.

Example:

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

answered Feb 01 '17 at 13:13

Radex

7,815
23
54
86

İzzet Altınel · Answer 4 · 2017-02-01T13:44:30.987

3

It is better to add another class and select with this class. You can then test it with regex.

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

edited Feb 01 '17 at 13:44

answered Feb 01 '17 at 13:27

İzzet Altınel

529
3
13

This will only selects `.wrap-3-addon-1` elements. (no `.wrap-2-addon-1`, no `.wrap-2-addon-1`) – ibrahim mahrir Feb 01 '17 at 13:30
This is only an example, you can test it with regex – İzzet Altınel Feb 01 '17 at 13:31
There is no need to test against a regular expression. `.wrap-3-addon-1` are already selected (alone). – ibrahim mahrir Feb 01 '17 at 13:34

score 2 · Answer 5 · edited May 23 '17 at 12:09

Inspiring regex matching from this 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>

er-han · Answer 6 · 2017-02-01T13:43:29.177

This might help you, i used regex to resolve if current element's class(es) suits the desired pattern.

I assume you have more than 3 classes to check. This pattern is for wrap-1-addon-1 to wrap-n-addon-1, n is some digit

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>

How to select element has class start and end with specific string using jquery?

6 Answers6