Selecting child div by id knowing a parent div id with JQuery selectors

Question

I have this html:

<div id="top">
<div id="potato"></div>
</div>
<div id="bottom">
<div id="potato"></div>
</div>

I am trying to use JQuery to access the bottom potato div, and none of the following work.

$('#top #potato').html('Russet');
$('#bottom #potato').html('Red');

$('#top > #potato').html('Russet');
$('#bottom > #potato').html('Red');

$('#potato').html('Idaho');

All of these just modify the top div and not the bottom one. How do I modify the bottom div?

Answer 1

All elements must have unique IDs, in this case you may use the class attribute, so that you have

<div class="potato" />

Which you may access like this:

$('#bottom > .potato').html('Idaho');

Answer 2

For one thing you can not have an element that has the same id as another. Id is unique, but class names can be used as many times as you want

<div id="top">
 <div id="potato1"></div>
</div>
 <div id="bottom">
 <div id="potato2"></div>
</div>

jquery as so:

$(function{
 $("#potato2").html('Idaho'); //if you're going to name it with an id, 
  //  that's all the selector you need
});

Answer 3

no need to put classes on everything, but you should have unique id's for everything. That aside, try this:

$("#bottom + div").html('Idaho');

Answer 4

Try this:

$("#bottom #potato").html('Idaho');

Or

$("#bottom #potato:last").html('Idaho');

Answer 5

your HTML is not valid, since you have non-unique ids