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

Question

Because I don't have a strict naming convention for divs, spans, and inputs, I frequently give more than one input the same id by accident, which of course causes jQuery/javascript code to not work.

Giving more than one element the same id is not allowed, but I don't see any kind of error message anywhere when it happens, so when I do this it sometimes takes a lot of time before the "oh duh" moment where I realize what I did.

Is there any way to know when more than one element has the same id?

Answer 1

This is going to be a standard practice you're going to learn through writing HTML over and over, time and time again! A good way to avoid using duplicate ID's would be to use less ID's and maybe use classes in their place.

Only use ID's for important/structural elements on your website such as #header , #footer , #main , #slideshow , #content , #sidebar , etc.

If you're repeating ID's over and over on a page maybe you should be using classes. Any element/styled module that is going to be reused on that a multiple times should be identified using a class.

Also, some IDE's will perform some special syntax highlighting/text-decoration to let you know that something funky is going on. Two that come to mind immediately are SublimeText2 and Visual Studio.

Here's a jQuery snippet you can run to check for duplicate ID's on a page. It will let you know in your Console (F12 developer tools/Firebug) if there are any duplicates on the page.

(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');  
    }  
})();  

You could throw this in your global footer so that it runs on every page, just be sure you take it out before going to production.

Here's a JSFiddle: http://jsfiddle.net/A7h75/

Got the script from here .

Answer 2

A good IDE will catch this for you. I use Zend Studio (which is essentially a PHP specific version of Eclipse ) and it will catch this for you as you write your code. That's about as soon as you can catch it.

Answer 3

You can check if your HTML is valid via the W3C Validator Service

This will show you all errors in your HTML and is advisable anyway just to check your HTML for errors that may cause cross-browser rendering problems

Various extensions exist for Firefox and Chrome to check your HTML without having to visit the Validator service 'manually'

Answer 4

you could utilize this function to check for duplicates

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

Answer 5

There's no way to turn on errors for this, but in a specific circumstance:

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

should do the trick.

Edit: thanks for the correction.