jQuery が重複 ID を持つ最初の要素のみを選択するのはなぜですか?

無効な HTML: 同じ ID を持つ複数の要素

問題の説明:

HTML 構造を考慮すると、同じ ID「xyz」を持つボタンが 3 つあります。ただし、jQuery ID セレクター $("#xyz") を使用して onClick イベントを処理する場合、最初のボタンのみが応答します。他のボタンは無視されます。

分析:

jQuery ID セレクターは、ドキュメント内で一致する ID を持つ最初の要素を選択するように設計されています。ただし、W3C 仕様によれば、ID 値はドキュメント内で一意である必要があります。同じ ID を持つ複数の要素があると、無効な HTML とみなされます。

jQuery API ドキュメントで説明されているように、複数の要素が同じ ID を持つ場合、jQuery セレクターは最初に一致した要素のみを選択します。この動作に依存することはお勧めできません。ID の一意性を確保するために HTML を修正する必要があります。

解決策:

この問題を解決するには、id 属性を次のように置き換えます。ボタンのクラス属性。これにより、HTML 検証ルールに違反することなく、ボタンに異なる値を設定できるようになります。

改訂された HTML:

<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 スクリプト:

xyz クラスを使用してすべてのボタンのクリック イベントを処理するには、次のコマンドを使用します。 jQuery コード:

$(".xyz").click(function(){
    // Get the value of the button that was clicked
    var xyz = this.value;

    // Display the value in an alert box
    alert(xyz);
});

この更新されたコードは、3 つのボタンすべての onClick イベントを適切に処理し、それぞれの値をアラート ボックスに表示します。

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