通过id选择子div,知道使用JQuery选择器的父div id

Question

我有这个HTML:

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

我试图使用JQuery访问底部的马铃薯div,并没有以下工作.

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

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

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

所有这些只是修改顶部div而不是底部div.如何修改底部div？

Answer 1

所有元素都必须具有唯一ID,在这种情况下,您可以使用class属性,以便您拥有

<div class="potato" />

你可以这样访问:

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

Answer 2

我刚遇到这个问题.虽然这是真的,你不应该有两个具有相同ID的项目,但它会发生.

为了得到你想要的div,这对我有用:

$('#bottom').find('#potato'); 

Answer 3

首先,你不能拥有一个与另一个具有相同id的元素.Id是唯一的,但类名可以根据需要多次使用

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

jquery如此:

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