Выбор дочернего div по id, знающему родительский идентификатор div с помощью селекторов JQuery

У меня есть этот 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?

Ответ 1

Все элементы должны иметь уникальные идентификаторы, в этом случае вы можете использовать атрибут класса, чтобы у вас

<div class="potato" />

Что вы можете получить так:

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

Ответ 2

Я столкнулся с этой проблемой. Хотя верно, что у вас не должно быть двух элементов с одинаковым идентификатором, это происходит.

Чтобы получить div, который вы хотите, это то, что работает для меня:

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

Ответ 3

С одной стороны, у вас не может быть элемента, который имеет тот же самый 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 all the selector you need
});

Ответ 4

То, что вы разместили и сказал, не работает, похоже, работает на меня.

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

https://jsfiddle.net/wzezr706/

Ответ 5

нет необходимости ставить классы на все, но у вас должен быть уникальный идентификатор для всего. В стороне, попробуйте следующее:

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

Ответ 6

Попробуйте следующее:

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

или

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

Ответ 7

ваш HTML недопустим, поскольку у вас есть не уникальный id s