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>

Answer 1

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.