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. — ibrahim mahrir
– ibrahim mahrir, Commented Feb 1, 2017 at 13:42
If you want to avoid serious performance issues then you might consider applying classes to your elements like this <div class="wrap wrap-1-addon-1"></div><div class="wrap wrap-2-addon-1"></div> 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
– MonkeyZeus, Commented Feb 1, 2017 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
– Marian Rick, Commented Feb 2, 2017 at 9:29

Mohammad · Accepted Answer · 2017-02-01 13:17:52Z

24

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 1, 2017 at 13:17

Mohammad

21.5k16 gold badges58 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marian Rick Over a year ago

I have tried to adopt your answer using .hasClass or .is as questioned, but it does not work. Do you got a suggestion why? jsbin.com/qomubezoti/1/edit?js,console,output

Kris Paulsen Over a year ago

This won't work if there are other classes on the element as the class attribute won't start and end as expected: <div class="foo wrap-1-addon-1"> <div class="wrap-1-addon-1 bar">

urbz · Accepted Answer · 2017-02-01 13:14:54Z

5

You can use starts with selector:

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

JsFiddle demo

answered Feb 1, 2017 at 13:14

urbz

2,6671 gold badge23 silver badges30 bronze badges

Comments

Radex · Accepted Answer · 2017-02-01 13:13:38Z

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 1, 2017 at 13:13

Radex

8,71724 gold badges63 silver badges98 bronze badges

Comments

İzzet Altınel · Accepted Answer · 2017-02-01 13:44:30Z

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 1, 2017 at 13:44

answered Feb 1, 2017 at 13:27

İzzet Altınel

5293 silver badges13 bronze badges

3 Comments

ibrahim mahrir Over a year ago

This will only selects .wrap-3-addon-1 elements. (no .wrap-2-addon-1, no .wrap-2-addon-1)

İzzet Altınel Over a year ago

This is only an example, you can test it with regex

ibrahim mahrir Over a year ago

There is no need to test against a regular expression. .wrap-3-addon-1 are already selected (alone).

Community · Accepted Answer · 2017-05-23 12:09:52Z

2

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>

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Feb 1, 2017 at 13:29

Developer

6,4703 gold badges20 silver badges24 bronze badges

Comments

er-han · Accepted Answer · 2017-02-01 13:43:29Z

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>

Collectives™ on Stack Overflow

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

6 Answers 6

2 Comments

Comments

Comments

3 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

3 Comments

Comments

Comments

Linked

Related