jQuery Selector Question

Question

I have the following jQuery code which all works fine:

         $("#sidebar .m3, #sidebar .m5").toggle(function() {                  
               $(this).find("img").attr({src:"images/Up.png"});                 
               }, function() {
               $(this).find("img").attr({src:"images/Down.png"});                  
         });

My question is, instead of individually specifying $("#sidebar .m3, #sidebar .m5"), where my menu items may have the classes m1,m2,m3,m4,m5 etc, is there anyway of having something like:

$("#sidebar .m[*]").

That will cater for any number after the ".m" , so I don't need to hard code m3 or m5?

Thanks.

for future reference why not just give the common things a common classname? — Brandon Henry, Jul 08 '10 at 00:23
take a look [here](http://stackoverflow.com/questions/190253/jquery-selector-regular-expressions) — griegs, Jul 08 '10 at 00:21

score 5 · Accepted Answer · answered Jul 08 '10 at 00:20

5

If that's the only (or first) class applied to the menu item you can use the attribute starts with selector.

$('#sidebar [class^=m]')...

A better way would be to give them all a common class, like menu-item, in addition to your other class that functions simply as a selector to group them all, then simply use:

$('#sidebar .menu-item')...

answered Jul 08 '10 at 00:20

tvanfosson

524,688
99
697
795

1

+1 tho just to clarify the menu item would end up looking something like `
...

Darko

Jul 08 '10 at 00:28

@Nick -- that's the first sentence in the answer. – tvanfosson Jul 08 '10 at 00:39

Hahaha, had my screen scrolled where that line was just out of view, removing that ignorant comment :) – Nick Craver Jul 08 '10 at 00:42

score 3 · Answer 2 · answered Jul 08 '10 at 00:22

You can also do this:

$(".m3, .m5", "#sidebar")

But...you're not restricted to one class, can you just use multiple? To use multiple classes just have a space between them, for example:

<div class="m5 myClass">Stuff</div>
<div class="m3 myClass">Stuff 2</div>

Then you can use that class, like this:

$("#sidebar .myClass")

Or, say your structure is like this:

<div id="sidebar">
  <div class="m5">Stuff</div>
  <div class="m3">Stuff 2</div>
</div>

You can just use the child-selector, like this:

$("#sidebar > div")

There are of course other ways to skin this cat as well, it just depends on what your markup is.

Boycs · Answer 3 · 2010-07-08T00:55:31.977

2

Can you tackle it a slightly different way???

If you have the ability to manipulate your HTML could add an additional class to all the menu items as a placeholder (for example, call the class 'm').

This would allow you to search on: $("#sidebar .m)

edited Jul 08 '10 at 00:55

answered Jul 08 '10 at 00:21

Boycs

5,610
2
28
23

score 0 · Answer 4 · answered Jul 08 '10 at 00:21

0

You could use the begins-with selector:

$("#sidebar *[class^='m']")

answered Jul 08 '10 at 00:21

You

22,800
3
51
64

jQuery Selector Question

4 Answers4