¿Cómo funciona jQuery cuando hay varios elementos con el mismo valor de ID?

Camila, miembro de nuestro equipo de trabajo, nos hizo el favor de escribir este tutorial porque domina perfectamente dicho tema.

Tener 2 elementos con el mismo ID no es HTML válido según la especificación W3C.

Cuando su selector de CSS solo tiene un selector de ID (y no se usa en un contexto específico), jQuery usa el nativo document.getElementById método, que devuelve solo el primer elemento con ese ID.

Sin embargo, en las otras dos instancias, jQuery se basa en el motor selector de Sizzle (o querySelectorAll, si está disponible), que aparentemente selecciona ambos elementos. Los resultados pueden variar según el navegador.

Sin embargo, nunca debe tener dos elementos en la misma página con el mismo ID. Si lo necesita para su CSS, use una clase en su lugar.

Si es absolutamente necesario seleccionar por ID duplicado, utilice un attribute selector:

$('[id="a"]');

Eche un vistazo al violín: http://jsfiddle.net/P2j3f/2/

Nota: si es posible, debe calificar ese selector con un selector de etiquetas, como este:

$('span[id="a"]');

Solo debe haber un elemento con una identificación determinada. Si está atrapado en esa situación, consulte la segunda mitad de mi respuesta para conocer las opciones.

La especificación no define cómo se comporta un navegador cuando tiene varios elementos con la misma identificación (HTML ilegal). Puede probar todos los navegadores y averiguar cómo se comportan, pero no es aconsejable utilizar esta configuración o confiar en un comportamiento en particular.

Utilice clases si desea que varios objetos tengan el mismo identificador.

    1
    2
    3


$(function() 
    var w = $("div");
    console.log($(".a").length);            // 2
    console.log($("body .a").length);       // 2
    console.log($(".a", w).length);         // 2
);

Si desea mirar de manera confiable elementos con ID que son los mismos porque no puede arreglar el documento, entonces tendrá que hacer su propia iteración ya que no puede confiar en ninguna de las funciones DOM integradas.

Podrías hacerlo así:

function findMultiID(id) 
    var results = [];
    var children = $("div").get(0).children;
    for (var i = 0; i < children.length; i++) 
        if (children[i].id == id) 
            results.push(children[i]);
        
    
    return(results);

O, usando jQuery:

$("div *").filter(function() return(this.id == "a"););

Ejemplo de trabajo de jQuery: http://jsfiddle.net/jfriend00/XY2tX/.

En cuanto a por qué obtiene resultados diferentes, eso tendría que ver con la implementación interna de cualquier parte de código que estuviera llevando a cabo la operación de selección real. En jQuery, podría estudiar el código para averiguar qué estaba haciendo una versión determinada, pero como se trata de HTML ilegal, no hay garantía de que permanecerá igual con el tiempo. Por lo que he visto en jQuery, primero verifica si el selector es una identificación simple como #a y si es así, solo usé document.getElementById("a"). Si el selector es más complejo que eso y querySelectorAll() existe, jQuery a menudo pasará el selector a la función del navegador incorporada que tendrá una implementación específica para ese navegador. Si querySelectorAll() no existe, entonces usará el motor selector de Sizzle para encontrar manualmente el selector que tendrá su propia implementación. Por lo tanto, puede tener al menos tres implementaciones diferentes, todas en la misma familia de navegadores, dependiendo del selector exacto y qué tan nuevo sea el navegador. Entonces, los navegadores individuales tendrán sus propios querySelectorAll() implementaciones. Si desea lidiar con esta situación de manera confiable, probablemente tendrá que usar su propio código de iteración como lo ilustré anteriormente.

jQuery's id selector solo devuelve un resultado. El descendant y multiple Los selectores de las declaraciones segunda y tercera están diseñados para seleccionar varios elementos. Es similar a:

Declaración 1

var length = document.getElementById('a').length;

... Da un resultado.

Declaración 2

var length = 0;
for (i=0; i

var length = document.getElementById('a').length + document.getElementsByTagName('div').length;