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 in Ihrer generierten Seite zu erstellen. ASP.NET würde Ihnen böse, aber einzigartige IDs geben.

Ich möchte ein kleines jQuery-Skript hinzufügen, um mein Dokument auf doppelte IDs zu überprüfen. Sie können IDs für DIVS, Bilder, Checkboxen, Buttons etc. sein.

My main panel
Oops we accidentally used the same ID

Ich bin auf der Suche nach einem Set und vergiss die Art Utility, die mich nur warnen, wenn ich etwas unvorsichtig mache.

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

   

Im Folgenden wird eine Warnung an die 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); }); 

Diese Version ist etwas schneller und Sie können sie in eine Lesezeichen-Schaltflä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'); })(); 

Ich habe eine große Seite, so dass das Skript zu langsam abläuft (mehrere “Script fortsetzen” -Nachrichten). 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); } } } }()); 

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

Warum validierst du nicht einfach deinen HTML?

Doppelte IDs sind nicht erlaubt, und normalerweise erhalten Sie einen Parse-Fehler.

Noch eine andere Art, Duplikate zu finden, aber dies wird eine Fehlerklasse hinzufügen, so dass es roten Text hat:

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

The '+number_of_errors+ ' items below in Red have identical ids. Please remove one of the items from its associated report!

'); }

Dies könnte den Trick machen Es wird alle IDs von Elementen mit Duplikaten alarmieren.

       

Ich mag das, weil es die tatsächlichen Elemente auf der Konsole ausspuckt. Es macht es einfacher zu untersuchen, was vor sich geht.

 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."; 

}

Ich habe eine function erstellt, mit der Sie ein bestimmtes Element untersuchen können, das nach doppelten IDs innerhalb oder auf der gesamten Seite sucht:

 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 

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

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

Sie könnten damit schnell mögliche Fehler in Ihrem HTML-Markup 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 Code hinzugefügt, bevor das body Tag geschlossen wird)