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.