jquery-selectors - JQueryセレクターで親div IDを知っているIDで子divを選択する

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 を持つ 2 つのアイテムを持つべきではないのは事実ですが、実際には起こります。

必要な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

すべてにクラスを配置する必要はありませんが、すべてに一意の ID が必要です。それはさておき、これを試してください：

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

Answer 5

これを試して：

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

または

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

Answer 6

一意でない があるため、HTML は有効ではありませidん