Dos elementos con la misma identificación, quiero seleccionar uno contenido en un div específico

Tengo algo como esto

<div id='container0'>
    <input id='item0'>
</div>


<div id='container1'>
    <input id='item0'>
</div>

Quiero seleccionar el segundo elemento 0 (el que está en div container1) y cambiar su identificación a item1. ¿La mejor manera de hacer esto? ¿Hay alguna manera de seleccionar todos los elementos 0 en una página y luego verificar su contenedor div y asegurarme de que coincida con 'contenedor1'?

Gracias por tu tiempo.

preguntado el 29 de septiembre de 13 a las 22:09

No debe tener varios elementos con el mismo ID. Los ID deben ser únicos. Cuando tenga más de uno, se seleccionará el primero y se ignorarán los demás. Utilice un nombre de clase en su lugar. -

por favor cambie el input id a class u otra etiqueta creada por ti -

El atributo id especifica una identificación única para un elemento HTML (el valor debe ser único dentro del documento HTML). El atributo id se usa principalmente para apuntar a un estilo en una hoja de estilo, y JavaScript (a través del HTML DOM) para manipular el elemento con la identificación específica. -

4 Respuestas

Tener más de un elemento con el mismo id is inválido. Entonces, la solución correcta aquí es: arreglar eso. (Normalmente usando un class en su lugar, pero hay otras opciones.)

Dicho eso, tu puede ser capaz de usar querySelector para esto:

var elm = document.querySelector("#container1 #item0");

Pero como la estructura no es válida, los resultados variarán de una implementación a otra, y no me sorprendería si muchos (o incluso la mayoría) regresaran null.

Nuevamente con la advertencia de que la solución real es corregir el duplicado no válido id, puede ser más confiable que lo anterior para usar getElementById para obtener el container1 elemento y luego recorrer sus nodos secundarios buscando uno con id == "item0".

Respondido el 29 de Septiembre de 13 a las 22:09

teniendo lo mismo id El atributo en dos elementos es un error de sintaxis, por lo que debe corregir el marcado. El comportamiento del navegador no está definido cuando se infringe la regla.

Si no puede corregir el error, por alguna extraña razón, aún puede encontrar el elemento con id=container1, Si que id atributo es único, y luego seleccione su primer elemento secundario, si el marcado es exactamente como se indica en la pregunta.

Respondido el 29 de Septiembre de 13 a las 22:09

Sé que no ha etiquetado esto con jQuery, pero creo que podría ser una solución. Entonces, ¿qué hay de darle a cada div una clase y luego ejecutar cada bucle con jQuery?

<div id='container0' class='container'>
    <input id='item0' class='item'>
</div>


<div id='container1' class='container'>
    <input id='item0' class='item'>
</div>

Entonces creo que cada ciclo podría manejarlo así:

$('div.container').each(function(key, value) { 
    var elmid = $("#"+key + " div.item).attr('id');
    var containerid = $(this).attr('id');

    var newelmid = elmid.replace('item','');    
    var newcontainerid = elmid.replace('container',''); 

    if(newelmid != newcontainerid)
    {
        $("#"+elmid).attr('id', 'item'+newcontainerid);
    }

});

Avísame si eso está cerca de lo que quieres hacer :)

Respondido el 29 de Septiembre de 13 a las 22:09

Como mencionaron los demás, no puede tener la misma identificación para varios elementos. Sin embargo, puede tener el mismo nombre. Después de corregir el problema de sintaxis de varias identificaciones para hacer que cada una sea única, puede seleccionar el segundo elemento de entrada según el contenedor en el que se encuentra. Usaría jQuery para esto.

Por ejemplo (tenga en cuenta que no estoy en mi computadora; estoy en mi teléfono, por lo que es posible que se requieran algunos cambios leves de sintaxis):

$("#container1 > input[name='item']").attr('id', 'item1')

Para los selectores de jQuery, mira aquí: http://api.jquery.com/category/selectors/

Para cambiar los atributos, mira aquí: http://api.jquery.com/attr/

Respondido el 29 de Septiembre de 13 a las 23:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.