jQuery ID セレクターが最初の要素でのみ機能するのはなぜですか?

jQuery ID セレクターは最初の要素のみを選択します: 問題の理解

同一の ID を持つ 3 つのボタンがあるにもかかわらず、jQuery の #id セレクターは最初のボタンのクリックにのみ応答します。この動作は、ドキュメント内の各要素に一意の ID が必要であるという基本的な HTML ルールに起因します。

無効な HTML 構造

提供された HTML コードは、同じ ID を割り当てることでこのルールに違反しています (" xyz") を複数のボタンに設定します。 HTML 仕様によれば、「この属性は要素に名前を割り当てます。この名前はドキュメント内で一意である必要があります。」

解決策: クラスに変換

この問題に対処するには、各ボタンのクラス属性を持つ 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

$(".xyz").click(function(){
    alert(this.value);
    // No need for jQuery $(this).val() to get the value of the input.
});

jQuery の動作を理解する

jQuery の #id セレクターは、DOM 内の指定された ID を持つ最初の要素のみを選択します。これは、ブラウザーの基になる document.getElementById 関数がこの動作を実行するためです。

結論

これらのガイドラインに従うことで、同じ機能目的を持つ複数の要素を jQuery で効果的に処理でき、次のことが保証されます。すべてのボタンが期待どおりにクリックに反応します。

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