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

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?

Answer 1

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

<div class="potato" />

К которым вы можете получить доступ следующим образом:

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

Answer 2

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

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

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

Answer 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's all the selector you need
});

Answer 4

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

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

https://jsfiddle.net/wzezr706/

Answer 5

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

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

Answer 6

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

Answer 7

Попробуйте это:

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

Или

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