2

因为我对 div、span 和输入没有严格的命名约定，所以我经常不小心给多个输入提供相同的 id，这当然会导致 jQuery/javascript 代码无法工作。

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

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

4

5 回答 5

3

这将是您将通过一遍又一遍地编写 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/

从这里得到脚本。

于 2013-04-12T22:45:14.363 回答
1

一个好的 IDE 会为您解决这个问题。我使用 Zend Studio（本质上是Eclipse的 PHP 特定版本），它会在您编写代码时为您捕捉到这一点。那是你能抓住它的时候。

于 2013-04-12T22:44:13.223 回答
1

您可以通过W3C Validator Service检查您的 HTML 是否有效

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

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

于 2013-04-12T22:45:19.410 回答
0

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

function getDuplicateIds(){
    var dups = [];
    $('[id]').each(function(){
        if($('[id="'+$(this).attr('id')+'"]').length > 1) dups.push($(this).attr('id'));
    })
    return $.unique(dups);
}
于 2013-04-12T23:08:50.173 回答
-1

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

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

应该做的伎俩。

编辑：感谢您的更正。

于 2013-04-12T22:44:37.507 回答