JQuery per verificare gli ID duplicati in un DOM

Sto scrivendo applicazioni con ASP.NET MVC. Al contrario di ASP.NET tradizionale, sei molto più responsabile della creazione di tutti gli ID nella tua pagina generata. ASP.NET ti darebbe brutti ma unici ID.

Vorrei aggiungere un breve script jQuery per controllare il mio documento per gli ID duplicati. Possono essere id per DIV, immagini, caselle di controllo, pulsanti, ecc.

My main panel
Oops we accidentally used the same ID

Sto cercando un’utilità di tipo set and forget che mi avviserà solo quando faccio qualcosa di noncurante.

Sì, lo userei solo durante i test e anche le alternative (come i plugin firebug).

Quanto segue registrerà un avvertimento alla 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); }); 

Questa versione è leggermente più veloce e puoi copiarla su un pulsante segnalibro per trasformarla in un bookmarklet.

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

Ho una pagina grande, quindi lo script viene eseguito troppo lentamente per terminare (più messaggi “continua script”). Funziona bene

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

Dovresti provare HTML Validator (estensione per Firefox). Ti dirà sicuramente che la pagina ha id duplicati e molto altro ancora.

Perché non convalidi solo il tuo html?

I Double ID non sono consentiti e normalmente si genera un errore di analisi.

Ancora un altro modo di localizzare i duplicati ma questo aggiungerà una class di errore in modo che abbia il testo in rosso:

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

'); }

Questo potrebbe fare il trucco Allerta tutti gli id ​​degli elementi con duplicati.

       

Mi piace perché sputa gli elementi reali nella console. Rende più facile indagare su cosa sta succedendo.

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

}

Ho creato una funzione in cui è ansible esaminare un elemento specifico alla ricerca di ID duplicati all’interno o dell’intera pagina:

 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 

È ansible utilizzare questa soluzione che stamperà in console un elenco di ID duplicati, se presenti.

È ansible eseguire il codice direttamente nella console (copia / incolla) dopo aver caricato il DOM e non richiede una dipendenza aggiuntiva come jQuery.

Potresti usarlo per scoprire rapidamente possibili errori nel tuo markup 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 esempio:

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

(qui il codice viene aggiunto prima di chiudere il tag body )