当多个元素共享相同 ID 时，为什么 jQuery 的 ID 选择器仅适用于第一个元素？

具有多个相同 ID 的 jQuery ID 选择器行为

使用 jQuery 时，您可能会遇到 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中文网其他相关文章！