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

Answer 4

你发布的内容和说的不起作用似乎对我有用。

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

https://jsfiddle.net/wzezr706/

Answer 5

无需在所有内容上放置课程，但您应该拥有所有内容的唯一ID。除此之外，试试这个：

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

Answer 6

试试这个：

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

或者

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

Answer 7

您的HTML无效，因为您有非唯一id s

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

7 个答案: