Question

因为我对div，spans和input没有严格的命名约定，所以我经常偶然给多个输入提供相同的id，这当然会导致jQuery / javascript代码不起作用。

不允许给多个元素使用相同的ID，但是当它发生时我没有看到任何类型的错误消息，所以当我这样做时，它有时需要很长时间才能在“哦duh”时刻之前我意识到我做了什么。

有没有办法知道多个元素何时具有相同的ID？

Answer 1

这将是一个标准的练习，你将通过一次又一次地反复编写HTML来学习！避免使用重复ID的一个好方法是使用较少的ID，并可能使用它们的类。

仅对您网站上的重要/结构元素使用ID，例如#header，#footer，#main，#slideshow，#content，{{1}等等。

如果你在页面上反复重复ID，也许你应该使用课程。应该使用类来识别将要多次重复使用的任何元素/样式模块。

此外，一些IDE会执行一些特殊的语法高亮/文本修饰，让你知道一些时髦的东西正在发生。立即浮现的两个是SublimeText2和Visual Studio。

这是一个jQuery代码段，您可以运行该代码段以检查页面上的重复ID。如果页面上有任何重复项，它会在您的控制台（F12开发人员工具/ Firebug）中通知您。

#sidebar

您可以将其放在全局页脚中，以便它在每个页面上运行，只需确保在投入生产之前将其取出。

这是一个JSFiddle：http://jsfiddle.net/A7h75/

Got the script from here

Answer 2

一个好的IDE会为你捕获这个。我使用Zend Studio（它本质上是Eclipse的PHP特定版本），它会在你编写代码时为你捕获这个。只要你能抓住它就会发生这种情况。

Answer 3

您可以通过W3C Validator Service

检查您的HTML是否有效

这将向您显示HTML中的所有错误，并且建议您检查HTML是否存在可能导致跨浏览器呈现问题的错误

Firefox和Chrome存在各种扩展程序来检查您的HTML，而无需“手动”访问Validator服务

Answer 4

您可以使用此功能检查重复项

function getDuplicateIds(){
    var dups = [];
    $('[id]').each(function(){
        if($('[id="'+$(this).attr('id')+'"]').length > 1) dups.push($(this).attr('id'));
    })
    return $.unique(dups);
}

Answer 5

没有办法为此开启错误，但在特定情况下：

$('[id={elementId}]').length > 1

应该这样做。

编辑：感谢您的纠正。

如果多个元素具有相同的ID，如何输出错误？

5 个答案: