jQuery ID 选择器仅适用于第一个元素

Posted 2023-05-07

【中文标题】jQuery ID 选择器仅适用于第一个元素

【英文标题】：jQuery ID selector works only for the first element

【发布时间】：2012-06-22 07:09:40

【问题描述】：

我有 3 个 ID 相同的按钮。我需要在单击每个按钮时获取它的值。

<button id="xyz" type="button" class="btn btn-primary" value="1">XYZ1</button>
<button id="xyz" type="button" class="btn btn-primary" value="2">XYZ2</button>
<button id="xyz" type="button" class="btn btn-primary" value="3">XYZ3</button>

这是我当前的jQuery 脚本：

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

但它只适用于第一个按钮，点击其他按钮被忽略。

【参考方案1】：

我有 3 个 id 相同的按钮 ...

您的 html 无效。一个页面中不能有多个元素具有相同的id 属性值。

Quoting the spec:

7.5.2 元素标识符：id 和 class 属性

id = 名称 [CS] 此属性为元素分配名称。此名称在文档中必须是唯一的。

解决方案：将id改为class：

<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").click(function()
    alert(this.value);
    // No need for jQuery :$(this).val() to get the value of the input.
);

但它只适用于第一个按钮

jQuery #id 选择器docs:

每个 id 值在文档中只能使用一次。 如果为多个元素分配了相同的 ID，则使用该 ID 的查询只会选择 DOM 中第一个匹配的元素。但是，不应依赖此行为；具有多个使用相同 ID 的元素的文档无效。

如果您查看 jQuery 源代码，您可以看到当您使用 id selecor-($("#id")) 调用 $ 时，jQuery 调用了原生 javascript document.getElementById 函数：

// HANDLE: $("#id")
 else 
    elem = document.getElementById( match[2] );

虽然，在document.getElementById 的spec 中，他们没有提到它必须返回第一个值，这就是大多数（也许是全部？）浏览器实现它的方式。

DEMO

【讨论】：

这是一个完整答案的本垒打！ ++1

谢谢，我已经尝试过了，它可以工作，但是使用 alert(this).val();现在我的按钮 css 类有问题，如您所见，按钮标签中有两个类

我已将我的课程修改为：class="btn btn-primary xyz" 谢谢你，Mafaik 真的很有帮助

@gdoron 你得到了它 innit :P ++ from stack overflow +1 from me bruv ++1 :P

对我来说看起来不错 :) 也许您可以添加一个关于普通 DOM 方法的句子，以便我们可以将其用作该案例的规范答案（可能需要稍微调整一下问题，但我从我的手机写）。无需将其设为社区 wiki，您应该得到代表 :)

【参考方案2】：

ID 表示“标识符”，每个文档仅有效一次。由于此时您的 HTML 是错误的，因此一些浏览器会选择第一个出现的元素，一些最后出现的具有该 ID 的元素。

更改名称的 id 将是一个很好的步骤。

然后使用$('button[name="xyz"]').click(function()

【讨论】：

事实上，如果您只使用 $('button[id="xyz"]')，它将适用于具有该 id 的所有按钮（就像想要的原始问题一样）。在 Chrome 中测试。

【参考方案3】：

根据我的经验，如果您改用 $('button#xyz') 选择器，它将起作用。这是一个 hack，但它仍然是无效的 HTML。

【参考方案4】：

虽然将 id 更改为类更好，但您可以使用 attribute equals selector 获取具有相同 id 的所有元素：

$('[id="xyz"]')

或者这样只获取带有 id xyz 的按钮：

$('button[id="xyz"]')

或者 id 为 xyz 的 div：

$('div[id="xyz"]')

等等

或者，您可以使用"Attribute Contains Selector" 来获取所有 id 包含“xyz”的元素：

$('[id*="xyz"]')

当然，这意味着所有 id 部分包含“xyz”的元素都会被选中。

【讨论】：

其实我上次检查的时候，你甚至可以使用$('[id="xyz"]')，它会工作的。但是，它是无效的 HTML，无论未记录的黑客攻击如何，都应该修复。

也许 $('[id="xyz"]') 没有记录（顺便说一句很好），但包含选择器的属性记录在案，见上文：P。

【参考方案5】：

如果您有多个具有相同 id 的元素，这也有效。

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

您可以查看HERE

【参考方案6】：

如果容器中有相同的 id，则可以使用 on() 访问每个事件的每个元素

$("#containers").on("click","#xyz",function()
  alert($(this).val())
  )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="containers">

<button id="xyz" type="button" class="btn btn-primary" value="1">XYZ1</button>
<button id="xyz" type="button" class="btn btn-primary" value="2">XYZ2</button>
<button id="xyz" type="button" class="btn btn-primary" value="3">XYZ3</button>

</div>

关于 on() 的信息是 here

【参考方案7】：

您不能拥有相同的 id，因为 id 在页面 HTML 中是唯一的。将其更改为类或其他属性名称。

$('attributename').click(function() alert($(this).attr(attributename)));