Nested ID in JQuery selector

I am trying to change the href of an a nested in a div called blink3:

$('#blink3 #backLink').attr('href',"#item5"); 

Where the html code is as follows:

<div> <a href="#item4"> <div></div></a> </div> 

works well in all browsers - NOT IE 7 and I cannot figure out why, doesn't change the href.

Is this a IE 7 bug? JQuery? anything wrong with my code?

Any solutions?

4 Answers

Nick Craver (omg, where have you been around?) already stated it in a comment. It totally makes no sense to create a selector like #id #id because an ID has to be unique within your DOM by definition.

It looks like you break that rule and therefore, jQuery might select a wrong node.

You should replace your "backlink" id's with classes and go for the selector like

$('#blink3 .backLink'); 

I don't see any duplication of ID's in the question and I too had the same question even though all of my ID's are unique. A perfectly valid reason for wanting to do nested ID selectors is to retrieve an element if and only if it is a child of a specific parent. I've run into this with drag and drop UIs as well as tree nodes. While not a selector, this is what I've used in the past:

$("#parentId").find("#childId") 

IDs are supposed to be unique within a page. As Nick implies, you should have only one ID with the value of backlink. So a selector of $('#backlink') should be enough by itself. If you have more than one ID with the value backlink, then your HTML is wrong and you should fix that instead.

To search nested elements using the id is as simple as concatenate id selectors, as for example:

$('#selector_modal #modal-title')

In this case we are searching a modal with id selector_modal and inside of it a h4 element that has in this case the id modal-title.

Very simple.