¿Es aceptable tener múltiples ID en una página html?

Question

Hay muchas preguntas sobre Desbordamiento de pila sobre id frente a class, pero estas preguntas casi siempre están relacionadas con CSS, y la respuesta generalmente aceptada es utilizar clases para dar estilo a un conjunto particular de elementos e identificadores para instancias específicas. Tiene sentido, es suficiente.

Estoy descubriendo sin embargo que a medida que hago más y más Javascript/jQuery/ajax, ese enfoque está empezando a ser menos claro y estoy encontrando situaciones en las que los elementos semánticamente deberían tener identificadores, pero porque podría haber varias instancias se supone que debo usar clases.

He aquí un ejemplo de lo que quiero decir:

Tome un vistazo a la barra de herramientas en el editor de preguntas de reducción del precio de desbordamiento de pila - cada botón tiene un ID para identificar de manera única. Tiene perfecto sentido: es un botón que realiza una función específica y probablemente haya un guion enganchado a él en función de esa identificación.

Ahora imagine que estoy construyendo una aplicación web rica y hay una página que tiene dos pestañas cada una con un editor de rebajas. ¿Esto significa que los botones de la barra de herramientas ahora deberían estar usando clases a identificarlos?

Esto parece incorrecto.

Otro ejemplo: estoy trabajando en un sitio de galería de fotos que tiene una pequeña barra de herramientas superpuesta en cada foto. La convención dice que debido a que hay varias instancias de estos botones, debería usar clases. De Verdad?

Así que mis preguntas son ....

• Si cometo el crimen de identificadores duplicados en una página, que los navegadores realmente va a romper?
• Para navegadores donde esto se rompe, ¿es solo el estilo CSS el que se romperá, o los selectores jQuery también se romperán?
• ¿Realmente es tan malo usar identificadores duplicados en casos como los descritos?

Answer 1

clases significan es una ... identificadores (indefinidos) significan es el ... (definitiva)

"Esta es una foto-div barra de herramientas. Puede haber más parecido ". Tiene sentido, usaría una clase.

No necesariamente identificaría los botones de la barra de herramientas, a menos que estuviera seguro de que solo puede haber una instancia de esa barra de herramientas en la página. En el caso del editor de rebajas de StackOverflow, también creo que estas deberían ser clases para una mayor flexibilidad (el editor completo puede ser envuelto en una ID única, como # answer-editor, o # comment-editor) en su lugar.

Los navegadores son bastante flexibles en lo que aceptan, pero eso no significa que los estándares se deben romper.

Answer 2

• Si cometo el crimen de identificadores duplicados en una página, que los navegadores realmente va a romper? Los validadores de HTML se quejan porque se supone que los atributos de identificación son únicos, , pero los tres motores principales del navegador me permiten salirse con la suya.

• Para los navegadores donde esto se rompe, ¿es solo el estilo CSS que se romperá, o los selectores jQuery también se romperán? jquery selector no funciona o no funciona como se esperaba. como se definió para seleccionar el único

• ¿Es realmente tan malo utilizar identificadores duplicados en casos como los descritos? por todas las normas, no es una buena práctica por lo que tratar de evitar lo más que pueda tendrá mucho sentido para el navegador, jQuery ....

Answer 3

Si tiene dos botones, usted debe tener dos identificadores diferentes para identificarlos .Puede utilizar las clases de estilo de ellos, pero no hay nada que le impida el uso de una función Javascript para dos botones:

$("#idOne").click(function(){ 
    myClickHandler(this); 
}); 

$("#idTwo").click(function(){ 
    myClickHandler(this); 
}); 

var myClickHandler = function(element){ 
    // element is the DOM Element of the Button that was clicked 
    // Turn it into a jQuery Object: $(element) 
}; 

Por supuesto, el botón normalmente interactúa con un TextArea de algún tipo, y las dos áreas de texto debe tener diferentes ID. Porque entonces se puede simplemente hacer esto:

$("#idOne").click(function(){ 
    myClickHandler(this,"idOfTextArea1"); 
}); 

$("#idTwo").click(function(){ 
    myClickHandler(this,"idOfTextArea2"); 
}); 

var myClickHandler = function(element, textAreaId){ 
    var ta = $("#"+textAreaId); 
    // Do something with the textarea 
} 

Answer 4

No lo hagas.

No es que los navegadores se romperán, es guiones que romperá. jQuery, cualquier cosa que use .getElementById, etc.

En algún momento, alguien más tendrá que trabajar en la aplicación, y espero que se enfurecerán intensamente con los identificadores duplicados.

Answer 5

me doy cuenta de que este es un tema bastante antiguo, pero me encontré con algo que puede ser pertinente.

donde trabajo, utilizamos un cms de fabricación propia (sitio enorme y de mucho tráfico). un div que normalmente se ha definido dentro de uno de los bloques de contenido cms desafortunadamente necesitaba estar codificado en la página jsp que sirve ese bloque. el motivo fue que el bloque en sí debía dividirse en dos, para facilitar la actualización de solo una parte de su contenido. necesitábamos usar el mismo id. de div para no romper la página. eso nos dejó con muchas y muchas páginas con dos instancias de esa identificación, hasta que podamos pasar y eliminar el div de los bloques cms.

la parte horrible: una instancia ahora era el antecesor de la otra, y con los estilos aplicados a ambas, la página se rompió.

en mi primer intento he añadido $('#theId').attr('id', ''); para eliminar el id, y encontraron que jQuery por lo hizo sólo de la primera instancia, que es un antepasado de la segunda. aunque se detuvo con el primero, no hubo error js.

teniendo esto en cuenta, hasta que podamos limpiar los cms,

$('#theId').addClass('notThisOne'); 

$('.notThisOne #theId').attr('id', '');` 

mantendrán a páginas de romper, ya sea nuevo (sin div#theId) o edad (incluyendo div#theId) está contenido en el bloque cms.