How to select class names with spaces and using wild card

Question

In the below html snippet I am trying to create a JQuery Expression to select all a tags with class zz1_TopNavigationMenu_1 Napa1-topnav zz1_TopNavigationMenu_*"

I am confused about constructing the select syntax that contains spaces in the class name. I also want a wild card at the end which is depicted above by the '*' char at the end.

<table class="Napa1-topnav zz1_TopNavigationMenu_4" border="0" cellSpacing="0" cellPadding="0">
<tbody>
<tr>
<td style="white-space: nowrap;">
<a class="zz1_TopNavigationMenu_1 Napa1-topnav zz1_TopNavigationMenu_3" style="border-bottom-style: none; border-right-style: none; border-top-style: none; font-size: 1em; border-left-style: none;" href="/sites/Brand1/SubSite

Answer 1

the space character is not valid in a class name; it's a delimiter. A tag may contain multiple class names. For example, <a id="foobar" class="foo bar"> has two classes: foo and bar, hence $('#foobar').getClasses() will have two class names.

So, if you want to select elements with a single class you do:

$('.foo')

If you want to select elements with multiple classes, you do:

$('.foo.bar')

Answer 2

.zz1_TopNavigationMenu_1.Napa1-topnav.zz1_TopNavigationMenu_whatever

Will get you elements that have all 3 of those classes. The wildcard doesnt work - there is no facility for this using CSS selectors. I would add a class of something like: zz1_TopNavigationMenu and then anything that was also zz1_TopNavigationMenu_whatever would get thsi grouping class. OR if possible you could use ID's or elements to get them all. For instance if its a menu id expect them all to be li elements so you could use: .zz1_TopNavigationMenu_1.Napa1-topnav li or something similar.

Take a look at the docs on css selectors for use with jQuery.

Answer 3

If those are the only 3 classes, and you're certain they will appear in that order, you could use a attribute-starts-with selector.

Try this:

$('a[class^=zz1_TopNavigationMenu_1 Napa1-topnav zz1_TopNavigationMenu_]')

This will select <a> elements where the class attribute starts with zz1_TopNavigationMenu_1 Napa1-topnav zz1_TopNavigationMenu_.

• http://api.jquery.com/attribute-starts-with-selector/

Alternatively, you could get elements with the first two classes, and use a filter to make sure it ends with the third class. The way it is written, it assumes your "wildcard" character will be a number or numbers.

$('a.zz1_TopNavigationMenu_1.Napa1-topnav').filter(function() {
    return /zz1_TopNavigationMenu_\d+$/.test($(this).attr('class'));
});

• http://api.jquery.com/filter/