私の jQuery ID セレクターが最初の要素にのみ影響するのはなぜですか?

jQuery ID セレクターは最初の要素のみをターゲットにします

概要

この記事では、jQuery ID セレクター (#xyz) がターゲットにできない問題に対処します同じ ID 値を持つ複数の要素。代わりに、最初に一致した要素に対してのみ動作し、後続の要素は応答しません。この動作は、HTML id 属性の誤った使用と jQuery ID セレクターの固有の制限に起因します。

HTML 検証

HTML 仕様によれば、ドキュメント内の各要素には一意の属性が必要です。 id 属性値。複数の要素に同じ ID を使用すると、HTML が無効になります。したがって、同じ ID (「xyz」) を持つ 3 つのボタンを含む次の HTML コードは正しくありません:

<button></button>

jQuery セレクターの動作

jQuery ID セレクター (#id) は次のとおりです。一意の ID に基づいて単一の要素をターゲットにするように設計されています。複数の要素が同じ ID を共有する場合、セレクターは HTML 仕様に従って、最初に一致した要素のみを選択します。したがって、クリック時に各ボタンの値を取得しようとする次の jQuery スクリプトは、最初のボタンに対してのみ機能します。

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

解決策

この問題を修正し、それぞれのボタンを確実に実行するにはボタンの機能を使用するには、HTML コードを変更して id 属性を class 属性に置き換える必要があります。これにより、HTML 標準に違反することなく、複数の要素が同じクラスを共有できるようになります:

<button class="xyz" value="1">XYZ1</button>
<button class="xyz" value="2">XYZ2</button>
<button class="xyz" value="3">XYZ3</button>

「xyz」クラスを持つすべての要素を対象とするように、対応する jQuery スクリプトを次のように更新する必要があります:

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

結論

これらの変更を採用することで、「xyz」クラスを持つすべてのボタンがクリック イベントに確実に応答し、以前のエラーを排除できます。最初のボタンのみが機能する問題。このアプローチは HTML 検証標準に準拠し、jQuery のクラス セレクターの柔軟性を活用して目的の動作を実現します。

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