jquery .each funciona solo en el primer elemento

Question

Tengo problemas para entender jqueries .each. Tengo el siguiente código:

$('#testDiv').each(function(index, domEle){  
    $(this).text(index); 
}); 

y el código HTML siguiente

<div id="p18"> 
    <div class="inner"> 
     <span>...</span> 
     <p class="right">...</p> 
     <div id="testDiv"></div> 
    </div> 
</div> 
<div id="p19"> 
    <div class="inner"> 
     <span>...</span> 
     <p class="right">...</p> 
     <div id="testDiv"></div> 
    </div> 
</div> 
<div id="p20"> 
    <div class="inner"> 
     <span>...</span> 
     <p class="right">...</p> 
     <div id="testDiv"></div> 
    </div> 
</div> 

Cuando se ejecuta el script sólo funciona para el primer testDiv, ya que establece correctamente el texto a 0, sin embargo los otros testDivs .

Mi objetivo general es escribir un script que establezca el alto del div en función de la altura de otro div. Las alturas son diferentes, así que creo que una estructura de bucle es el camino a seguir (¿a menos que esté equivocado?)

¿Qué estoy haciendo incorrectamente con el código jq?

Answer 1

No se puede utilizar el mismo #id para diferentes elementos. Trate de cambiar el nombre del resto y obtendrá el resultado que desea

O hacer esto (obras sin la adición de ninguna clase - un código más limpio)

$('.inner div').each(function(index, domEle){  
    $(this).text(index); 
}); 

Answer 2

Eso no es un problema con el método each. Ha especificado el mismo id para varios elementos, que no es compatible.

Utilice una clase en su lugar, y puede encontrar todos los elementos.

Demostración: http://jsfiddle.net/Guffa/xaL4n/

Answer 3

id selector de máximo rendimiento de un elemento.

Nunca debe tener más de un elemento con la misma identificación. que es un código HTML no válido

Esto funciona, pero se debe fijar el código HTML en su lugar:

$('div[id="testDiv"]')... 

Lo que realmente debe hacer es:

<div id="p18"> 
    <div class="inner"> 
     <span>...</span> 
     <p class="right">...</p> 
     <div class="testDiv"></div> 
    </div> 
</div> 
<div id="p19"> 
    <div class="inner"> 
     <span>...</span> 
     <p class="right">...</p> 
     <div class="testDiv"></div> 
    </div> 
</div> 

A continuación, seleccione la clase:

$('.testDiv')... 

Answer 4

Tiene un html no válido. Los ID deben ser únicos. Debe cambiar id="testDiv" a class="testDiv"

HTML:

<div id="p20"> 
    <div class="inner"> 
     <span>...</span> 
     <p class="right">...</p> 
     <div class="testDiv"></div> 
    </div> 
</div> 

Javascript:

$('.testDiv').each(function(index, domEle){  
    $(this).text(index); 
}); 

Answer 5

No se puede especificar misma div id en una página HTML.

<div id="testDiv"></div> 

insteed de eso, tratar

<div class="testDiv"></div> 

y su función debe ser similar

$('.testDiv').each(function(index, domEle){  
$(this).text(index); 

});