I need to get every element with a specific id, get the parent of the object, and set its ID.
How would I do this?
I have this code:
<li id="edge_top"> </li>
<!-- Menu Items Here -->
<li id="not_selected"><a id="selection_link" href="index.htm">Home</a></li>
<li id="not_selected"><a id="selection_link" href="page1.htm">Subitem 1</a></li>
<li id="not_selected"><a id="selection_link" href="page2.htm">Subitem 2</a></li>
<!-- Menu Items End Here -->
<li id="edge_bottom"> </li>
I need to find all the anchor elements with the id "selection_link", get the parent (the "list item" element [li]) and set its ID to "selected". How would I do this with jQuery? I'll be using the conditioning to determine if the li element will actually be allowed to get the new ID. (if the URL matches the href property of the anchor element).
I need to get every element with a specific id, get the parent of the object, and set its ID.
How would I do this?
I have this code:
<li id="edge_top"> </li>
<!-- Menu Items Here -->
<li id="not_selected"><a id="selection_link" href="index.htm">Home</a></li>
<li id="not_selected"><a id="selection_link" href="page1.htm">Subitem 1</a></li>
<li id="not_selected"><a id="selection_link" href="page2.htm">Subitem 2</a></li>
<!-- Menu Items End Here -->
<li id="edge_bottom"> </li>
I need to find all the anchor elements with the id "selection_link", get the parent (the "list item" element [li]) and set its ID to "selected". How would I do this with jQuery? I'll be using the conditioning to determine if the li element will actually be allowed to get the new ID. (if the URL matches the href property of the anchor element).
Share Improve this question asked May 25, 2011 at 12:01 FreesnöwFreesnöw 32.3k31 gold badges94 silver badges140 bronze badges4 Answers
Reset to default 11HTML specification specifies that an ID should only be applied to 1 element. You can't have more then one element with the same ID.
In this case, it's better to use classes.
TO select by class:
$(".classname")...
EDIT: An example based on your code:
<li class="edge_top"> </li>
<!-- Menu Items Here -->
<li class="not_selected"><a class="selection_link" href="index.htm">Home</a></li>
<li class="not_selected"><a class="selection_link" href="page1.htm">Subitem 1</a></li>
<li class="not_selected"><a class="selection_link" href="page2.htm">Subitem 2</a></li>
<!-- Menu Items End Here -->
<li class="edge_bottom"> </li>
<script type="text/javascript">
$(document).ready(function(){
$(".selection_link").parent().removeClass("not_selected").addClass("selected")
});
</script>
You need to use classes for that. In HTML you not allowed to use ID's multiple times.
The id attribute should be unique across your XHTML document, so this question is not really valid.
Although this may work if you really insist:
$("[id=xx]")
$('li a').each(function(){
if ($(window).attr('location').href.match($(this).attr('href'))) {
//example with class
$(this).parent().addClass('selected');
// example with id
$(this).parent().attr('id', 'selected');
}
});