为什么 jQuery 只选择第一个具有重复 ID 的元素？

无效的 HTML：具有相同 ID 的多个元素

问题描述：

在给定 HTML 结构，存在三个具有相同 ID“xyz”的按钮。但是，当使用 jQuery ID 选择器 $("#xyz") 处理 onClick 事件时，只有第一个按钮有响应。其他按钮将被忽略。

分析：

jQuery ID 选择器旨在选择文档中具有匹配 ID 的第一个元素。但是，根据 W3C 规范，ID 值在文档中应该是唯一的。多个元素具有相同的 ID 被视为无效 HTML。

如 jQuery API 文档中所述，如果多个元素具有相同的 ID，则 jQuery 选择器将仅选择第一个匹配的元素。不建议依赖此行为，应更正 HTML 以确保 ID 的唯一性。

解决方案：

要解决此问题，请将 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);
});

此更新的代码将正确处理所有三个按钮的 onClick 事件，并在警报框中显示它们各自的值。

以上是为什么 jQuery 只选择第一个具有重复 ID 的元素？的详细内容。更多信息请关注PHP中文网其他相关文章！