Nested ID in JQuery selector

jquery nested selector
jquery descendant selector
jquery find
jquery selector with parent id
jquery parent > child selector
jquery get id
jquery greater than selector
jquery id 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 style="float:left;text-align:center;" id="blink3">
<a href="#item4" class="panel" id="backLink">
<div class="divBack"></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?

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');

what's the proper way to select a nested div with jquery?, Because ids are unique on a valid HTML page. after me with the same ID's so my parent-child selector would guard against that, right? id: An ID to search for, specified via the id attribute of an element. For id selectors, jQuery uses the JavaScript function document.getElementById() , which is extremely efficient. When another selector is attached to the id selector, such as h2#pageTitle , jQuery performs an additional check before identifying the element as a match.

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

Child Selector (“parent > child”), Child Selector (“parent > child”) child selector. Description: parent: Any valid selector. child: A selector to filter the child elements. <li>Nested item 1</li>. The #id Selector. The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element. To find an element with a specific id, write a hash character, followed by the id of the HTML element:

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.

Jquery Selector: Find nested/child elements, Dot selector. Hash (#) selectors search element with id. This is equivalent to a native javascript method document.getElementById() . If you want the details about� parent: Any valid selector. child: A selector to filter the child elements. The child combinator (E > F) can be thought of as a more specific form of the descendant combinator (E F) in that it selects only first-level descendants.

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.

jQuery Selectors, Use our jQuery Selector Tester to demonstrate the different selectors. Selector, Example, Selects. *, $("*"), All elements. #id, $("#� Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

How do you target a nested element inside of a class?, To select #nav a , wrap it in a jQuery object and Bob's yer uncle. $('#nav a'). method(). #nav a is a CSS selector for any anchor contained in the element by id� Selects all sibling elements that follow after the “prev” element, have the same parent, and match the filtering “siblings” selector. Also in: Selectors > Basic Filter :not() Selector

Multiple Class / ID and Class Selectors, Select the element which has an ID of header and also a class name of callout. Maybe this graphic will make that more clear: Combinations of Classes and IDs. The elements will be filtered by testing whether they match this selector; all parts of the selector must lie inside of an element on which .find() is called. The expressions allowed include selectors like > p which will find all the paragraphs that are children of the elements in the jQuery object. Consider a page with a basic nested list on it:

ID selectors, The following ID selector matches the H1 element whose ID attribute has the the fictional start tags of the first-line pseudo-elements were nested just inside the � jQuery Forum Move this topic Forum : Getting Started Using jQuery Using jQuery Plugins Using jQuery UI Developing jQuery Core Developing jQuery Plugins Developing jQuery UI QUnit and Testing About the jQuery Forum jQuery Conferences jQuery Mobile Developing jQuery Mobile

Comments
  • How many id="backLink" do you have in your code?
  • IDs are supposed to be unique to a page and if you have a number of the same IDs inline then I would imagine this is the root cause of your problems. Classes, on the other hand, are meant to be assigned to a number of different DOM elements.
  • Youre quick....I know I shouldn't have more than one... but I need it for some other things. would this cause the problem, and only in IE 7?
  • OK. So i need you experts to tell me : can I write $(this).attr('class')=="backlink"? as oppose to $(this).attr('id')?
  • @NinaNa: Probably yes. Duplicate ids do cause problems in IE7 where they usually don't cause problems in newer browsers.
  • Out of curiosity. What if NinaNa has got multiple <a/>s within id="blink3" and he/she wants to access multiple ones of them? If $('blink3') is saved in a variable blink3 first, wouldn't blink3.find('#backLink') be faster than $('#backLink')?