重复的 ID 值会破坏 jQuery 选择器吗？

Posted 2023-02-24

【中文标题】重复的 ID 值会破坏 jQuery 选择器吗？

【英文标题】：Do duplicate ID values screw up jQuery selectors?

【发布时间】：2022-01-19 17:58:52

【问题描述】：

如果我有两个 id="myDiv" 的 div，$("#myDiv").fadeOut(); 会将两个 div 都淡出吗？或者它只会褪色第一个/第二个？还是根本没有？

如何更改它淡出的那个？

注意：我知道重复的 id 是违反标准的，但我使用的是 fancybox 模式弹出窗口，它会在您的页面上复制指定的内容作为弹出窗口的内容。如果有人知道解决这个问题的方法（也许我使用错了）请告诉我。

【问题讨论】：

是的，但我希望如果我问其他人，他们可能能够解释为什么只有第一个会淡出。

是否重复？还是将内容“移动”到您的弹出窗口位置？

它复制了它。当我通过 Firebug 查看源代码时，我可以明显地看到其中的代码两次。一次放在我放的地方，一次在花式盒子里

这能回答你的问题吗？ jQuery id selector works only for the first element

【参考方案1】：

元素 ID 应该是唯一的。拥有多个具有相同 ID 的 DIV 将是不正确且不可预测的，并且违背了 ID 的用途。如果你这样做了：

$('.myDiv').fadeOut();

假设您给它们一个 myDiv 类和唯一 ID（或根本没有），这会使它们都淡出。

【参考方案2】：

“注意：我知道重复的 id 不符合标准”

那就别这样了。你已经发现了两个问题。它违反了标准，并且干扰了 jQuery（实际上是常规 DOM）的选择机制。未来可能会有更多问题。

很可能，您 使用了 fancybox 错误，在这种情况下，我希望熟悉它的人对您有所帮助。或者更糟的是，如果脚本本身有缺陷，你就不应该使用它。

【讨论】：

那么我应该编写自己的模态弹出窗口吗？我知道我不是唯一一个使用fancybox的人。这根本没有真正回答我的问题......

我从未建议你编写自己的模态对话框。

【参考方案3】：

jQuery 在查询 ID 时只匹配一个元素。 $("#foo").get() 将返回最多包含一个 Element 对象的数组。请参阅jQuery documentation 了解更多信息，或亲自尝试。

$(function() 
    alert($("#foo").length);
);

【讨论】：

$("#foo") 不返回数组。它返回一个包含多个函数的对象。 $("#foo").get() 是一个数组。

实际上您可以索引 jquery 对象，例如 $('.foo')[0]。这是否使它成为一个数组；）

正如redsquare所说，可以使用下标访问元素，jQuery也提供了“length”属性。从这个意义上说，您可以将它视为一个数组。但是，没有提供其他数组函数（如 pop、join 等）。正如 Matthew 指出的那样，我更新了我的答案以包含 get 函数。

【参考方案4】：

我遇到了同样的问题。显然，当您在希望打开 Fancybox 的页面上创建内容时，它会创建原始内容的镜像 div。在我的例子中，控件被包装在一个由 fancybox 创建的名为“fancy_div”的 div 中

我能够选择控件并使用选择器的以下格式获取它的值：

$('#fancy_div [id=InputText]').val();

您的控件可能存在于 Fancybox 中的其他位置。最好的办法是查看视图源，但这很棘手。

要获取视图源，请使用以下技术： 将此标签放在您的表单上： 获取价值 打开您的表单，单击标签以打开警报窗口。 确保您的光标位于页面内容内（找到一个控件并单击）。 右键单击控件并选择“查看源代码”。 存在一堆 div，因此请查找包含您的内容的 div。

希望这会有所帮助。

【参考方案5】：

由于 $('#myDiv') 只会返回具有该 ID 的第一个 div，因此您必须使用此技巧找到具有该 ID 的所有元素：

$('[id=myDiv]');

因此，对于您的情况，将淡出应用于所有这些 div：

$('[id=myDiv]').fadeOut();

如果您想确保您的页面没有两次使用此 ID，则可以通过以下操作删除多余的 ID：

$('[id=myDiv]:gt(0)').remove();

【讨论】：

我认为每个人都同意拥有重复的 id 是你能做的最糟糕的事情之一（伤害小猫咪并制造悲伤的熊猫）。虽然，这个技巧帮助我修复了我编写的一个小型实用 Web 应用程序中的一个小错误。事实上，我有隐藏的表用作模板（我复制它们以生成新的）并且这些模板包含 Id，因为然后我使用这些 id 在客户端进行翻译（是的，我在这里玩 javascript 很有趣 ^ ^)

【参考方案6】：

你也可以走使用 find() 的路线。 find 将返回具有该 ID 的所有元素，如果需要，您可以将范围限制为特定父级尝试类似 $(document).find('#myDiv').fadeOut();

或

$('.parentElement').find('#myDiv').fadeOut();

【参考方案7】：

我最近遇到了类似的问题。我有一个通过 Ajax 加载显示不同内容的页面。有一个按钮可以触发服务器生成PDF图片。

我最初的解决方案是使用类选择器，效果很好，但与其他开发人员产生了摩擦。链接中已经有很多类，使用类作为标识符会使代码变得丑陋。所以我使用了一个名称属性：

<a name="printButton"....

$('a[name="printButton"]').on('click',function()....

干得漂亮！