find the class a better way - jquery

Question

I know my selector will have a class of level-1, level-2, level-3

I want to set the level based on this but my way feels a bit clunky? Is there a neater way to do this

if ( $level.hasClass('level-2')) {
    $levelValue= "level2";
}
if( $level.hasClass('level-3')) {
    $levelValue = "level3";
}

if ( $level.hasClass('level-4')) {
    $levelValue= "level4";
}

edit: sorry my mistake

Are you really trying to set level to level2 for all of the classes?? It looks like you made a mistake but I could be wrong if thats what you intended.... Also in your question you say it will have class level-1 to level-3 but in the code it does 2-4. Which do you need? — Kierchon
– Kierchon, Commented Oct 9, 2013 at 14:21

Joe · Accepted Answer · 2013-10-09 14:36:50Z

2

Use this:

if($level.is('.level-2, .level-3, .level-4')){
    $level = "level2";
}

This uses jQuery's .is() function and checks whether $level has any of the classes.

Update: Try using this:

if($level.is('[class^="level"]')){
    $levelValue = $level.attr('class').match(/level-[0-9]*/); // e.g. 'level-2'
}

Here it is working: http://jsfiddle.net/rE3bL/1/

edited Oct 9, 2013 at 14:36

answered Oct 9, 2013 at 14:20

Joe

15.6k8 gold badges51 silver badges57 bronze badges

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

1 Comment

LeBlaireau Over a year ago

lovely - thanks very much, I need to get better at regular expressions. Though it needs the wildcard in my code class*="level"

Jason Sperske · Accepted Answer · 2013-10-09 14:21:55Z

0

Are there style rules associated with each level? If it's just data the I'd use a data attribute like data-level='2' then you can access this by using this jQuery function: $level.data('level')

answered Oct 9, 2013 at 14:21

Jason Sperske

30.5k8 gold badges77 silver badges127 bronze badges

Comments

mador · Accepted Answer · 2013-10-09 14:31:28Z

0

what is $level? a div? if you want to set $level to "level1", "level2" and "level3" (not "level2" every time like in your code), you can use the data attr:

<div class="level1" data-level="1">
<div class="level2" data-level="2">
<div class="level3" data-level="3">

and your js is like:

$level = $level.data("level") //will return "1","2" or "3"

answered Oct 9, 2013 at 14:31

mador

1,2239 silver badges13 bronze badges

1 Comment

LeBlaireau Over a year ago

this would definately work but is a drupal menu and I cant access the data attribute.

Collectives™ on Stack Overflow

find the class a better way - jquery

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related