jQuery selector help

Question

I have a large HTML document which has roughly this structure:

<div id="a">
    <!-- more html code here -->
    <span id="title">...</span>
    <!-- more html code here -->
</div>
<div id="b">
    <!-- more html code here -->
    <span id="title">...</span>
    <!-- more html code here -->
</div>
...
...
<div id="z">
    <!-- more html code here -->
    <span id="title">...</span>
    <!-- more html code here -->
</div>    

Notice that the outer DIVs have IDs which are unique ("a", "b", ..., "z"), but inner SPANs have IDs which is non-unique ("title").

To select a SPAN which is inside the DIV "q", for instance, I tried using this:

$("#q").find("#title"); 

This runs fast on FF and Chrome but the find() method takes a long time to execute in IE8 (and IE7). Is there some other way I can do this?

Please let me know if I can provide any further information.

Answer 1

You should change your markup to use classes for the <span> elements instead of IDs since IDs must be unique.

<div id="a">
    <!-- more html code here -->
    <span class="title">...</span>
    <!-- more html code here -->
</div>
<div id="b">
    <!-- more html code here -->
    <span class="title">...</span>
    <!-- more html code here -->
</div>
...
...
<div id="z">
    <!-- more html code here -->
    <span class="title">...</span>
    <!-- more html code here -->
</div> 

then:

$("#q").find(".title");

If I remember correctly, IE in particular has trouble with non-unique IDs. Changing your code to above may do the trick for you.

Answer 2

As everyone else said, the code is invalid. However, if you are stuck with it, you should be able to do this to select it correctly. Without running tests, I am not sure how performant this will be over the other method you tried:

$("#b span[id=title]");

Answer 3

How about something like

$("#q").find("span").each(function() {
    if($(this).attr("id") == "title") {
        $(this).css('color','red');
    }
});

This works for me in IE/FF