wake-up-neo.com

JQuery, um nach doppelten IDs in einem DOM zu suchen

Ich schreibe Anwendungen mit ASP.NET MVC. Im Gegensatz zu herkömmlichem ASP.NET sind Sie viel mehr dafür verantwortlich, alle IDs auf Ihrer generierten Seite zu erstellen. ASP.NET würde Ihnen böse, aber eindeutige IDs geben.

Ich möchte ein kurzes jQuery-Skript hinzufügen, um mein Dokument auf doppelte IDs zu prüfen. Dies können IDs für DIVS, Bilder, Ankreuzfelder, Schaltflächen usw. sein.

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

Ich suche nach einem Set und vergesse ein typisches Hilfsprogramm, das mich nur warnt, wenn ich etwas Unvorsichtiges tue.

Ja, ich würde dies nur während des Testens verwenden, und Alternativen (wie Firebug-Plugins) sind ebenfalls willkommen. 

96
Simon_Weaver

Im Folgenden wird eine Warnung an der Konsole protokolliert:

// 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

Diese Version ist etwas schneller und Sie können sie in eine Lesezeichenschaltfläche kopieren, um sie zu einem Bookmarklet zu machen.

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

Ich habe eine große Seite, so dass das Skript zu langsam ausgeführt wird, um es zu beenden (mehrere Meldungen "Skript fortsetzen"). Das funktioniert gut.

(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

Sie sollten versuchen, HTML Validator (Firefox-Erweiterung). Es wird Ihnen definitiv sagen, dass die Seite doppelte IDs hat und vieles mehr.

12
Ionuț G. Stan

Warum validieren Sie nicht einfach Ihre HTML-Datei?

Doppelte IDs sind nicht zulässig und normalerweise wird ein Parser-Fehler angezeigt.

7
Natrium

Eine weitere Möglichkeit, Duplikate zu finden, aber dies fügt eine Fehlerklasse hinzu, sodass roter Text angezeigt wird:

// 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

Dies kann den Trick bewirken Es werden alle IDs von Elementen mit Duplikaten gewarnt.

<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

Ich mag das, weil es die tatsächlichen Elemente zur Konsole ausspuckt. Es macht es einfacher zu untersuchen, was los ist.

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

Sie können diese Lösung verwenden, die in der Konsole eine Liste doppelter IDs ausgibt, wenn eine vorhanden ist.

Sie können den Code direkt in der Konsole ausführen (Kopieren/Einfügen), nachdem Sie DOM geladen haben und keine zusätzlichen Abhängigkeiten wie jQuery benötigen.

Damit können Sie mögliche Fehler in Ihrem HTML-Markup schnell herausfinden.

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

Ein Beispiel:

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

(hier wird der Code vor dem Schließen des body-Tags hinzugefügt)

1
GibboK

Ich habe eine Funktion erstellt, mit der Sie ein bestimmtes Element untersuchen können, um nach doppelten IDs innerhalb der gesamten Seite zu suchen:

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