複数の要素が同じ ID を共有している場合、jQuery の ID セレクターが最初の要素でのみ機能するのはなぜですか?

複数の同一 ID による jQuery ID セレクターの動作

jQuery を使用する場合、ID セレクター ($(" #xyz")) は、最初に一致した要素から値のみを取得するようです。この動作は、特に同じ ID を持つすべての要素に対して機能すると期待している場合に、混乱しイライラする可能性があります。

同じ ID を持つ HTML コード

次の点を考慮してください。 3 つの ID に同じ ID (「xyz」) を誤って割り当てている HTML コードボタン:

<button></button>

jQuery コード

クリックされたボタンの値を取得するには、次の jQuery コードを試してみてください:

$("#xyz").click(function() {
    var xyz = $(this).val();
    alert(xyz);
});

最初のボタンのみで機能する理由

この内容この場合、jQuery コードは最初のボタンに対してのみ機能します。 jQuery ID セレクターは、指定された ID に一致する最初の要素を選択するように設計されています。 ID "xyz" は複数回繰り返されるため、最初の ID のみが返されます。

HTML の無効性と解決策

この動作は、有効な HTML を保証することの重要性を強調しています。コード。 HTML 仕様によれば、各 ID 値はドキュメント内で一意である必要があります。同じ ID を持つ複数の要素を持つことは無効であり、避ける必要があります。

問題を修正するには、各ボタンの ID をクラス属性に置き換えます。

<button type="button" class="btn btn-primary xyz" value="1">XYZ1</button>
<button type="button" class="btn btn-primary xyz" value="2">XYZ2</button>
<button type="button" class="btn btn-primary xyz" value="3">XYZ3</button>

更新された jQueryコード

更新された HTML コードを使用してクリックされたボタンの値を取得するには、クラスを使用しますselector:

$(".xyz").click(function() {
    alert(this.value);
});

注: この改訂されたコードでは、「this」キーワードを $() で囲む必要はありません。これはすでにネイティブ JavaScript オブジェクトであるためです。

以上が複数の要素が同じ ID を共有している場合、jQuery の ID セレクターが最初の要素でのみ機能するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。