CODEWITHSUNDEEP
jquery
Rohit Agarwal
Rohit Agarwal

Reputation: 4289

jQuery selector help

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.

Upvotes: 1

Views: 97

Answers (3)

Marko
Marko

Reputation: 72230

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

Upvotes: 0

Doug Neiner
Doug Neiner

Reputation: 66221

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]");

Upvotes: 2

user113716
user113716

Reputation: 322592

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.

Upvotes: 8

Related Questions