Matching when element has multiple ids

Question

I'm looping through a form and showing content that matches my selected id's. The problem is that some divs contain more than one id in which case it stops working. Any ideas? Thanks.

Jquery Code:

$('#myForm').find('div').each(function() {
        var myId = $(this).attr('id');

        /* This will work */
        if (myId == "Select1"){
                $(this).removeClass("hideMe");
                $(this).addClass("showMe");
                }
        /* This does not work */
        else if (myId == "Select4"){
                $(this).removeClass("hideMe");
                $(this).addClass("showMe");
                }
        else{}

        });

HTML Code:

<div class="hideMe" id="Select1">
<p>Some Content</p>
</div>

<div class="hideMe" id="Select2 Select3 Select4 Select5">
<p>Some Content</p>
</div>

The problem is that divs cannot have multiple IDs. See this question: http://stackoverflow.com/q/192048/206403 — gen_Eric, Jun 15 '11 at 21:19
According to the specification an `id` cannot contain spaces. So your HTML is not valid. And if you do invalid HTML it means that everything that happens from this moment on is undefined behavior. And, hey, this behavior might differ among browsers. So start by fixing your HTML first. — Darin Dimitrov, Jun 15 '11 at 21:19

Chris Baker · Accepted Answer · 2011-06-15T21:25:37.873

There is no such thing as "multiple ids".

https://developer.mozilla.org/en/XUL/Attribute/id

According to the standard, any string data within the id property is regarded as a part of the value.

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

reference: http://www.w3.org/TR/REC-html40/types.html#type-name

There's another way, though! You can have all sorts of class names, and you can use jQuery to grab an element by class name.

HTML

<div class="hideMe Select1">
<p>Some Content</p>
</div>

<div class="hideMe Select2 Select3 Select4 Select5">
<p>Some Content</p>
</div>

Javascript

$('.Select2')[0]

The [0] part of that is because when you get elements by class name, there can be several. The jQuery selector returns an array, so you're just grabbing the first one.

And for what it's worth - don't use colons or dots, because it makes it impossible to write a normal selector for the element. #id.something treats 'something' as a class and #id:something treats 'something' as a pseudo-selector. — Ben Hull, Jun 15 '11 at 21:22

score 1 · Answer 2 · answered Jun 15 '11 at 21:20

1

You can't have multiple ids. However, you can have multiple classes if you wish.

answered Jun 15 '11 at 21:20

Jason

51,583
38
133
185

score 1 · Answer 3 · answered Jun 15 '11 at 21:21

It's not valid to have multiple ID's - the browser will see id="Select2 Select3 Select4 Select5" as a single string, but that string will be invalid because it contains spaces.

From the HTML data types spec: http://www.w3.org/TR/REC-html40/types.html#type-name

You should use classes for this, I think.

score 0 · Answer 4 · answered Jun 15 '11 at 21:21

0

ID's are unique and elements can only have 1 ID!

Use multiple classes instead.

answered Jun 15 '11 at 21:21

Marko

71,361
28
124
158

score 0 · Answer 5 · answered Jun 15 '11 at 21:21

0

An element shouldn't have more than one unique identifier that's why it's actually called an id: to identify it against all others. Anyway, you have to test if myId contains Select4 rather than testing the equality.

answered Jun 15 '11 at 21:21

patapizza

2,398
15
14

Matching when element has multiple ids

5 Answers5