Selecting an element where selector finds in a specific class of element

Question

I have the following structure of div tags and each div tag has multiple classes like :-

<div>

     <div class="jsh-a_train_hotel_amsterdam info js-multiple"></div>

     <div class="jsh-info info js-multiple"></div>

     <div class="jsh-myinfo info js-single"></div>

</div>

Now I want to find div tags which have class name starting with "jsh-" and also the class that starts with "jsh-" should have a substring "info" in it.

So the result should be the following :-

<div class="jsh-info info js-multiple"></div>
<div class="jsh-myinfo info js-single"></div>

(Reason: Because the above 2 div tags have classes jsh-info and jsh-myinfo which satisfies the condition that the element class name should have "jsh-" and the substring in the "jsh-" class name value should have string "info" in it)

I think you should rethink your selecting scenario. Use one class to select the divs for one scenario, e.g. jsh-select and use one function to distinct its purpose, e.g. hasClass("info"). The given answers are correct but your requirements make it far to irregular to create a standard .. — dbf
– dbf, Commented Apr 21, 2013 at 10:48

Ejaz · Accepted Answer · 2013-04-21 11:57:21Z

1

Try this

var elems = $('div[class^="jsh"]').filter(function(){
    return $(this).attr('class').match(/jsh[^ ]info/)
});

Or better use following as jsh-info can occur anywhere in class attribute value

var elems = $('div[class*="jsh"]').filter(function(){
    return $(this).attr('class').match(/\s*jsh[^ ]info/)
});

Update

A you don't need to apply any jquery functions on the elements inside filter(), converting a DOM element to a jQuery object is not needed. So you can use

return this.className.match(/\s*jsh[^ ]*info/)

instead of

return $(this).attr('class').match(/\s*jsh[^ ]info/)

Update 2

If you don't want to hardcode info and want to replace it with a variable, you can do as follows

var theVar = 'info';
$('div[class*="jsh"]').filter(function () {
    return this.className.match(new RegExp('jsh[^ ]*' + theVar, 'gi'))
})

edited Apr 21, 2013 at 11:57

answered Apr 21, 2013 at 10:36

Ejaz

8,8723 gold badges38 silver badges52 bronze badges

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

7 Comments

user2142938 Over a year ago

Ejay, this really seems promising, and since i am not too much expert in regex, can you please tell will it also find div with class "jsh-ab_info_bye"?

Ejaz Over a year ago

it does, you can test it with various combinations :)

Eli Over a year ago

How can this regex match jsh-myinfo?

Ejaz Over a year ago

the [^ ]* part in jsh[^ ]*info means zero or more characters that are not a space. So jsh[^ ]*info will match jshinfo, jsh-info, jsh-myinfo, jsh-ab_info, and jsh_anything_can_be_here_except_space_info. You can read more about this in detail on following MDN Page developer.mozilla.org/en-US/docs/JavaScript/Guide/…

Eli Over a year ago

@Ejay Then can I ask you why only div2 in this example has red color: jsfiddle.net/TaK8f

|

Ram · Accepted Answer · 2013-04-21 10:36:17Z

0

Try something like $('div[class^="jsh-"]').filter('div[class*="info"]') the first selector is start with the second is contains.

edited Apr 21, 2013 at 10:36

Ram

145k16 gold badges174 silver badges201 bronze badges

answered Apr 21, 2013 at 10:25

chickpeas

4435 silver badges16 bronze badges

3 Comments

user2142938 Over a year ago

This will not work because it will select first div tag too as first div tag has class that start with "jsh-" and it also has a separate class "info", which is not what i require. I want to select element which has class that starts with "jsh-" and the same class that starts with "jsh-" should have a substring "info" like "jsh-myinfo".

chickpeas Over a year ago

$('div[class^="jsh-"]').filter('div[class*="info"]').not('.info') but you must be aware that this kind of selector is computationally heavy

user2142938 Over a year ago

Cecilia, I think this will also not work as ".not('.info')" will filter out all the divs which have "info" class, thus there will be no divs in result.

Collectives™ on Stack Overflow

Selecting an element where selector finds in a specific class of element

2 Answers 2

Update

Update 2

7 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update

Update 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related