¿Los ID duplicados arruinan los selectores jquery?

Question

Si tuviera dos divs, ambos con id = " myDiv "

¿Desvanecería $("#myDiv").fadeOut(); ambos divs? ¿O se desvanecería solo el primer / segundo? ¿O ninguno en absoluto?

¿Cómo cambio cuál se desvanece?

Nota: sé que los ID duplicados están en contra de los estándares, pero estoy usando la ventana emergente modal de fancybox y duplica el contenido especificado en su página para el contenido de la ventana emergente. Si alguien sabe cómo solucionar esto (tal vez estoy usando fancybox incorrectamente), avíseme.

Answer 1

jQuery coincide exactamente con un elemento cuando se busca una ID. Element devolverá una matriz de como máximo un objeto $("#foo").get(). Consulte la documentación de jQuery para obtener más información, o pruébelo usted mismo.

$(function() {
    alert($("#foo").length);
});

Answer 2

Se supone que las ID de elementos son únicas. Tener múltiples DIV de la misma ID sería incorrecto e impredecible, y desafía el propósito de la ID. Si hiciste esto:

$('.myDiv').fadeOut();

Eso los desvanecería a ambos, suponiendo que les dé una clase de myDiv e ID únicos (o ninguno).

Answer 3

" Nota: Sé que los ID duplicados están en contra de los estándares "

Entonces no lo hagas. Ya has descubierto dos problemas. Viola los estándares e interfiere con el mecanismo de selección de jQuery (y de hecho el DOM regular). Probablemente habrá más problemas en el futuro.

Posiblemente, estás usando fancybox incorrectamente, en cuyo caso espero que alguien familiarizado con él te ayude. O peor, si el script en sí es defectuoso, no debe usarlo.

Answer 4

Dado que $ ('# myDiv') solo devolverá el primer div con esa ID, tendrá que encontrar todos los elementos con esa ID usando este truco:

$('[id=myDiv]');

Entonces, para su caso, para aplicar el fadeOut a todos esos divs:

$('[id=myDiv]').fadeOut();

Y si desea asegurarse de que su página no tenga este ID dos veces, puede eliminar los adicionales haciendo esto:

$('[id=myDiv]:gt(0)').remove();

Answer 5

También puede seguir la ruta del uso de find (). find devolverá todos los elementos con esa ID, y puede limitar el alcance a un padre en particular si es necesario, intente algo como $(document).find('#myDiv').fadeOut();

o

$('.parentElement').find('#myDiv').fadeOut();

Answer 6

Me encontré con el mismo problema. Aparentemente, cuando crea contenido en la página desde la que desea abrir un Fancybox, crea un div espejo del contenido original. En mi caso, los controles estaban envueltos en un div que crea fancybox llamado, & Quot; fancy_div & Quot;

Pude seleccionar el control y obtener el valor & # 8217; s usando el siguiente formato para el selector:

$ ('# fancy_div [id = InputText]'). val ();

sus controles pueden existir en otro lugar dentro de Fancybox. lo mejor que puede hacer es mirar la fuente de visualización, pero es complicado.

Para llegar a la fuente de vista, use la siguiente técnica: Coloque esta etiqueta en su formulario: Obtener valor Abra su formulario, haga clic en la etiqueta para abrir la ventana de alerta.
Asegúrese de que su cursor esté dentro del contenido de la página (busque un control y haga clic).
Haga clic derecho fuera del control y seleccione & Quot; ver fuente & Quot ;.
Existen muchos divs, así que busca el div que contiene tu contenido.

Espero que esto ayude.

Answer 7

Recientemente tuve un problema similar. Tenía una sola página que mostraba contenido diferente a través de una carga Ajax. Hay un botón que activa el servidor para generar una imagen PDF.

Mi solución original era usar un selector de clase, que funcionaba bien, pero causaba fricción con otro desarrollador. Ya había tantas clases en los enlaces que usar una clase como identificador hacía que el código fuera feo. Entonces utilicé un atributo de nombre:

<a name="printButton"....

$('a[name="printButton"]').on('click',function(){....

¡Trabajó simplemente dandy!