ansaurus

Question

JQuery to check for duplicate ids in a DOM

Answer 1

+6 A:

Why don't you just validate your html?

Double ID's are not allowed, and normally you will get a parse-error.

Natrium 2009-01-27 09:29:11

what options are there for this?

Simon_Weaver 2009-01-27 09:39:40

Also in FF, use the web developer toolbar under tools it has validators

NTulip 2009-02-04 03:20:55

Answer 2

+8 A:

You should try HTML Validator (Firefox extension). It'll definitely tell you the page has duplicate ids and much more.

Ionuț G. Stan 2009-01-27 09:31:23

Answer 3

+1 A:

This might do the trick It will alert all the ids of elements with duplicates.

<html>
    <head>
     <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
     <script type="text/javascript">
      function findDupes()
      {
        var all = $("*");
        for(var i = 0; i < all.length; i++)
        {
            if (all[i].id.length > 0 && $("[id='" + all[i].id + "']").length > 1) alert(all[i].id);
        }
      }
     </script>
    </head>
    <body onload="findDupes()">
     <div id="s"></div>
     <div id="f"></div>
     <div id="g"></div>
     <div id="h"></div>
     <div id="d"></div>
     <div id="j"></div>
     <div id="k"></div>
     <div id="l"></div>
     <div id="d"></div>
     <div id="e"></div>
    </body>
</html>

Stephen lacy 2009-01-27 10:00:29

Answer 4

+7 A:

The following will log a warning to firebug's console.

// Warning Duplicate IDs
$('[id]').each(function(){
  var ids = $('[id='+this.id+']');
  if(ids.length>1 && ids[0]==this)
    console.warn('Multiple IDs #'+this.id);
});

sunsean 2009-02-04 03:32:46

perfect! thanks! already discovered three places where I have duplicate IDs. it frustrates me slightly that most peoples solution to this problem is to use 'firebug' or 'html validator'. thats not good enough! i want to catch the unexpected duplicates in wierd situations.

Simon_Weaver 2009-02-04 03:55:30

hehe and i switched console.warn to alert(...) so i HAVE to fix them :)

Simon_Weaver 2009-02-04 03:57:53

have found this extremely useful and valuable. i think it ought to be a standard in frameworks - especially during debugging

Simon_Weaver 2009-06-11 22:45:02

Awesome tip! Thanks!

Raj 2010-05-21 05:36:04

Answer 5

+2 A:

Yet another way of locating duplicates but this will add a class of error so it will have red text:

// waits for document load then highlights any duplicate element id's
$(function(){ highlight_duplicates();});

function highlight_duplicates() {
  // add errors when duplicate element id's exist
  $('[id]').each(function(){ // iterate all id's on the page
    var elements_with_specified_id = $('[id='+this.id+']');
    if(elements_with_specified_id.length>1){
      elements_with_specified_id.addClass('error');
    }
  });


  // update flash area when warning or errors are present
  var number_of_errors = $('.error').length;
  if(number_of_errors > 0)
    $('#notice').append('<p class="error">The '+number_of_errors+
      ' items below in Red have identical ids.  Please remove one of the items from its associated report!</p>');
}

Joshaven Potter 2009-06-11 20:53:21

thats kinda cool! thanks. i've actually found the original accepted answer invaluable. caught so many things and saved probably hours of time!

Simon_Weaver 2009-06-11 22:44:17

Cool, but why not just use console functions and let them do the rest? Separation of logic and presentation etc etc...

Will Morgan 2009-11-11 13:39:47

ansaurus

tags:

views:

answers:

JQuery to check for duplicate ids in a DOM

related questions