web-dev-qa-db-fra.com

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

J'écris des applications avec ASP.NET MVC. Contrairement à ASP.NET traditionnel, vous êtes beaucoup plus responsable de la création de tous les identifiants de votre page générée. ASP.NET vous donnerait des identifiants méchants, mais uniques.

Je voudrais ajouter un petit script jQuery rapide pour vérifier mon document pour les identifiants en double. Ils peuvent être des identifiants pour 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 cherche un ensemble et oublie le type utilitaire qui me préviendra lorsque je fais quelque chose d'inattentif.

Oui, je ne l'utiliserais que pendant les tests, et les alternatives (comme les plugins Firebug) sont également les bienvenues. 

jquerydom
96
Simon_Weaver

Les éléments suivants consignent un avertissement sur la 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);
});
191
sunsean

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

J'ai une grande page, de sorte que le script s'exécute trop lentement pour 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);
            }
        }
    }
}());
14
AutoSponge

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

12
Ionuț G. Stan

Pourquoi ne pas valider votre code HTML?

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

7
Natrium

Encore une autre façon de localiser les doublons, mais cela ajoutera une classe d’erreur de sorte que le texte sera en rouge:

// 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>');
}
4
Joshaven Potter

Cela pourrait faire l'affaire Il alertera tous les identifiants d'éléments contenant des doublons.

<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>
1
Stephen Lacy

J'aime ça parce que ça crache les éléments réels dans la console. Il est plus facile d’enquêter sur ce qui se passe.

function CheckForDuplicateIds() {
var ids = {};
var duplicates = [];

$("[id]").each(function() {
    var thisId = $(this).attr("id");
    if (ids[thisId] == null) {
        ids[thisId] = true;
    } else {
        if (ids[thisId] == true) {
            duplicates.Push(thisId);
            ids[thisId] = false;
        }
    }
});
if (duplicates.length > 0) {
    console.log("=======================================================");
    console.log("The following " + duplicates.length + " ids are used by multiple DOM elements:");
    console.log("=======================================================");
    $(duplicates).each(function() {
        console.warn("Elements with an id of " + this + ":");
        $("[id='" + this + "']").each(function() {
            console.log(this);
        });
        console.log("");
    });
} else {
    console.log("No duplicate ids were found.");
}
return "Duplicate ID check complete.";

}

1
Burton

Vous pouvez utiliser cette solution qui imprimera dans la console une liste d'identifiants en double, le cas échéant.

Vous pouvez exécuter le code directement dans la console (copier/coller) après le chargement de votre DOM et ne nécessite pas de dépendance supplémentaire comme jQuery.

Vous pouvez l'utiliser pour identifier rapidement les erreurs possibles dans votre balise HTML.

    (function (document) {
        var elms = document.body.querySelectorAll('*[id]'),
            ids = [];
        for (var i = 0, len = elms.length; i < len; i++) {
            if (ids.indexOf(elms[i].id) === -1) {
                ids.Push(elms[i].id);
            } else {
                console.log('Multiple IDs #' + elms[i].id);
            }
        }
    })(document);

Un exemple:

https://jsbin.com/cigusegube/edit?html,console,output

(ici le code est ajouté avant la fermeture de la balise body)

1
GibboK

J'ai créé une fonction permettant d'inspecter un élément spécifique à la recherche d'identifiants dupliqués dans la totalité de la page

function duplicatedIDs(container) {

    var $container  = container ? $(container) : $('body'),
        elements = {},
        duplicatedIDs = 0;
        totalIDs = 0;

    $container.find('[ID]').each(function(){
        var element = this;

        if(elements[element.id]){
            elements[element.id].Push(element);
        } else  {
            elements[element.id] = [element];
        }
        totalIDs += 1;

    });

    for( var k in elements ){
        if(elements[k].length > 1){
            console.warn('######################################')
            console.warn('        ' + k )
            console.warn('######################################')
            console.log(elements[k]);
            console.log('---------------------------------------');
            duplicatedIDs += elements[k].length
        }
    }
    console.info('totalIDs', totalIDs);
    console.error('duplicatedIDs', duplicatedIDs);
}

duplicatedIDs('#element'); //find duplicated ids under that element
duplicatedIDs(); // entire page
0
diegodafm