JQuery para verificar si hay identificadores duplicados en un DOM

Estoy escribiendo aplicaciones con ASP.NET MVC. A diferencia de ASP.NET tradicional, eres mucho más responsable de crear todos los identificadores en tu página generada. ASP.NET te daría desagradables, pero únicos identificadores.

Me gustaría agregar un pequeño script jQuery rápido para verificar si mi documento tiene identificadores duplicados. Pueden ser identificadores para DIVS, imágenes, casillas de verificación, botones, etc.

My main panel
Oops we accidentally used the same ID

Estoy buscando un conjunto y olvidar la utilidad de tipo que me advierta cuando hago algo descuidado.

Sí, lo usaría solo durante las pruebas, y también son bienvenidas las alternativas (como los complementos de Firebug).

Lo siguiente registrará una advertencia a la consola:

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

Esta versión es algo más rápida y puede copiarla en un botón de marcador para que sea 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'); })(); 

Tengo una página grande, por lo que el script se ejecuta demasiado lento para finalizar (múltiples mensajes de “continuar script”). Esto funciona 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); } } } }()); 

Deberías probar HTML Validator (extensión de Firefox). Definitivamente te dirá que la página tiene identificaciones duplicadas y mucho más.

¿Por qué no solo validas tu html?

Los ID dobles no están permitidos, y normalmente obtendrás un error de análisis.

Otra forma de localizar duplicados, pero esto agregará una clase de error, por lo que tendrá texto en rojo:

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

'); }

Esto podría ser el truco. Alertará todos los identificadores de elementos con duplicados.

       

Me gusta porque arroja los elementos reales a la consola. Hace que sea más fácil investigar qué está pasando.

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

}

Creé una función en la que puedes inspeccionar un elemento específicamente en busca de identificadores duplicados en la página completa o en ella:

 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 

Puede utilizar esta solución que imprimirá en la consola una lista de identificadores duplicados, si los hay.

Puede ejecutar el código directamente en la consola (copiar / pegar) después de cargar DOM y no requiere dependencia adicional como jQuery.

Puede usarlo para descubrir rápidamente posibles errores en su marcado 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 ejemplo:

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

(aquí se agrega el código antes de cerrar la etiqueta del body )