create - JQuery para verificar si hay identificadores duplicados en un DOM
jquery get element (10)
¿Por qué no solo validas tu html?
Los ID dobles no están permitidos, y normalmente obtendrás un error de análisis.
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.
<div id="pnlMain"> My main panel </div>
<div id="pnlMain"> Oops we accidentally used the same ID </div>
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).
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
Deberías probar HTML Validator (extensión de Firefox). Definitivamente te dirá que la página tiene identificaciones duplicadas y mucho más.
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'');
})();
Esto podría ser el truco. Alertará todos los identificadores de elementos con duplicados.
<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>
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);
});
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.";
}
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(''<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>'');
}
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 )
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);
}
}
}
}());