當多個元素共用相同 ID 時，為什麼 jQuery 的 ID 選擇器僅適用於第一個元素？

具有多個相同ID 的jQuery ID 選擇器行為

使用jQuery 時，您可能會遇到ID 選擇器($(ID " #xyz")) 似乎只檢索第一個符合元素的值。這種行為可能會令人困惑和沮喪，尤其是當您希望它適用於具有相同 ID 的所有元素時。

具有相同ID 的HTML 代碼

考慮以下內容HTML 程式碼，錯誤地將相同的ID（「xyz」）指派給三個按鈕：

<button>

jQuery程式碼

您可以嘗試以下jQuery 程式碼來擷取點擊按鈕的值：

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

為什麼它只適用於第一個按鈕

在這種情況下，jQuery 程式碼僅適用於第一個按鈕。 jQuery ID 選擇器旨在選擇與指定 ID 相符的第一個元素。由於 ID“xyz”重複多次，因此僅傳回第一個。

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程式碼擷取已點擊的按鈕的值，請使用該類別選擇器：

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

注意：在這個修改後的程式碼中，沒有必要用$()包裹「this 」關鍵字，因為它已經是一個原生的JavaScript物件。

以上是當多個元素共用相同 ID 時，為什麼 jQuery 的 ID 選擇器僅適用於第一個元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！