JQuery pour vérifier les identifiants en double dans un DOM

Question

Je suis en train d'écrire des applications avec ASP.NET MVC. Contrairement à la traditionnelle ASP.NET vous êtes beaucoup plus responsable de la création de tous les id de votre page générée. ASP.NET serait de vous donner des méchants, mais des identifiants uniques.

Je voudrais ajouter un petit script jQuery pour vérifier mon document pour les id en double. Ils peuvent être des id pour les DIVS, des images, des cases à cocher, des boutons etc.

<div id="pnlMain"> My main panel </div>
<div id="pnlMain"> Oops we accidentally used the same ID </div>

Je suis à la recherche d'un ensemble et d'oublier de type utilitaire qui vais juste m'avertir quand je fais quelque chose d'irréfléchi.

Oui, je serais en utilisant ce uniquement pendant les essais, et les solutions de rechange (comme firebug plugins) sont aussi les bienvenues.

Answer 1

Les éléments suivants consignent un avertissement sur la console de Firebug.

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

Answer 2

Cette version est un peu plus rapide et vous pouvez la copier sur un bouton de signet pour en faire un signet.

 javascript:(function () {
  var ids = {};
  var found = false;
  $('[id]').each(function() {
    if (this.id && ids[this.id]) {
      found = true;
      console.warn('Duplicate ID #'+this.id);
    }
    ids[this.id] = 1;
  });
  if (!found) console.log('No duplicate IDs found');
})();
 

Answer 3

J'ai une grande page, de sorte que le script s'exécute trop lentement pour se terminer (plusieurs messages "continuer le script"). Cela fonctionne bien.

 (function () {
    var elms = document.getElementsByTagName("*"), i, len, ids = {}, id;
    for (i = 0, len = elms.length; i < len; i += 1) {
        id = elms[i].id || null;
        if (id) {
            ids[id] =  ids.hasOwnProperty(id) ? ids[id] +=1 : 0;
        }
    }
    for (id in ids) {
        if (ids.hasOwnProperty(id)) {
            if (ids[id]) {
                console.warn("Multiple IDs #" + id);
            }
        }
    }
}());
 

Answer 4

Vous devriez essayer HTML Validator (extension Firefox). Il va certainement vous dire que la page a des identifiants en double et bien plus encore.

Answer 5

Pourquoi ne validez-vous pas votre code HTML?

Les doubles identifiants ne sont pas autorisés et vous obtiendrez normalement une erreur d'analyse.