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

因为我没有严格的div，span和input的命名约定，我经常给一个以上的输入提供相同的id，这当然会导致jQuery/javascript代码无法工作。当多个元素具有相同的ID时如何输出错误？

给予多个元素相同的ID是不允许的，但是当它发生时我不会在任何地方看到任何错误信息，所以当我这样做的时候，有时需要很多时间才会出现“哦，哦，当我意识到我做了什么。

有什么方法可以知道何时多个元素具有相同的ID？

来源

2013-04-12 Nate

以前的答案[链接]（http://stackoverflow.com/questions/482763/jquery-to-check-for-duplicate-ids-in-a-dom） – mconlin

这将是你经历写HTML一遍遍的学习，一次一个标准的做法！避免使用重复ID的一个好方法是使用更少的ID，也许可以使用类来代替它们。

仅使用ID对您网站的重要/结构元素，如#header，#footer，#main，#slideshow，#content，#sidebar等

如果你重复ID的一遍又一遍的网页上也许你应该正在使用类。任何要重复使用的元素/样式模块都应该使用一个类来标识。

此外，一些IDE的将执行一些特殊的语法高亮/文本修饰，让你知道，时髦的东西是怎么回事。两个想到的立即是SublimeText2和Visual Studio。

下面是一个jQuery代码片段，您可以运行该代码片段来检查页面上的重复ID。它会让你知道你的控制台（F12开发工具/ Firebug），如果页面上有任何重复的东西。

(function() { 
    var found = false; 
    $('[id]').each(function() { 
     var ids = $('[id=' + this.id + ']'); 
     if (ids.length > 1 && ids[0] === this) { 
      console.warn('ID used more than once: ' + this.id, ids); 
      found = true; 
     } 
    }); 
    if (!found) { 
     console.log('No duplicate IDs found'); 
    } 
})();

你可以在全局页脚抛出此所以它运行的每个页面上，只要确保你把它拿出来，才去生产。

这里有一个的jsfiddle：http://jsfiddle.net/A7h75/

Got the script from here。

来源

2013-04-12 22:45:14

+1，以减少ID的使用 – thaJeztah

好的建议，但我刚刚开始使用AJAX应用程序，并且据我所知，更新跨度，div和输入内容的唯一方法是为它们分配一个id。所以很多很多的元素都必须有ID。 – Nate

@Nate你通常使用什么来编码？ –

一个好的IDE会为您解决这个问题。我使用Zend Studio（本质上是Eclipse的PHP特定版本），它会在您编写代码时抓住这一点。这是关于一旦你可以赶上它。

来源

2013-04-12 22:44:13

添加[PhpStorm]（http：// www .jetbrains.com/phpstorm /）到这个列表。尽管我认为任何适当的IDE都会验证您的HTML，但如果内容是动态生成的（例如，由PHP循环输出的文章的A *列表*），它并不总是能够正确验证。为了正确验证，我倾向于使用浏览器插件进行验证 – thaJeztah

@thaJeztah - 我实际上使用PhpStorm，但是当我在多个元素上使用相同的ID时，似乎没有任何大惊小怪。我确实通过PHP生成了一些页面输出，所以我想我可能会试一试FF插件。 – Nate

@Nate有趣的是，它没有发现这个问题，现在不在我的电脑后面，而是会检查它是否不存在（否则将会发布一个JetBrains的功能请求/错误报告，因为这显然是一个遗漏！） – thaJeztah

-1

有没有办法打开这个错误，但在特定的情况下：

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

应该做的伎俩。

编辑：感谢您的更正。

来源

2013-04-12 22:44:37 Doug

不起作用，[但是'（'[id = elementId]'）']（http://jsfiddle.net/robertc/6EThy/） – robertc

可以检查你的HTML是通过W3C Validator Service

有效这将显示在您的HTML所有的错误和建议反正只是为了检查你的HTML代码中的错误可能导致跨浏览器呈现问题

各种扩展的Firefox和Chrome存在检查你的HTML，而无需“手动”访问验证服务

来源

2013-04-12 22:45:19 thaJeztah

您可以利用此功能来检查重复

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

来源

2013-04-12 23:08:50 Ejaz

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

回答

相关问题