jquery .each funktioniert nur auf das erste Element

Question

Ich habe Probleme, jqueries .Each zu verstehen. Ich habe den folgenden Code:

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

und den folgenden HTML

<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> 

Wenn das Skript läuft es funktioniert nur für die erste testDiv, wie es richtig, den Text auf 0 setzt, aber die anderen testDivs .

Mein übergeordnetes Ziel ist es, ein Skript zu schreiben, das die Höhe des Div basierend auf der Höhe eines anderen DIV setzt. Die Höhen unterscheiden sich, also denke ich, dass eine Schleifenstruktur der Weg ist (außer ich täusche mich?)

Was mache ich falsch mit dem jq-Code?

Answer 1

Sie können nicht die gleiche #id für verschiedene Elemente verwenden. Versuchen Sie, den Rest umbenennen und Sie werden das Ergebnis erhalten Sie

wollen

Oder tun dies (Arbeiten ohne Klassen Zugabe - saubereren Code)

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

Answer 2

Das ist kein Problem mit der each Methode. Sie haben dieselbe id für mehrere Elemente angegeben, was nicht unterstützt wird.

Verwenden Sie stattdessen eine Klasse, und Sie können alle Elemente finden.

Demo: http://jsfiddle.net/Guffa/xaL4n/

Answer 3

id Wähler maximal ein Element zurückgibt.

Sie sollten nie mehr als ein Element mit derselben ID haben. es ist eine ungültige HTML

Dies funktioniert, aber Sie sollten die HTML reparieren statt:

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

Was sollten Sie wirklich tun, ist:

<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> 

von der Klasse wählen Sie dann:

$('.testDiv')... 

Answer 4

Sie haben ungültiges HTML. Ids müssen einzigartig sein.

<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

Sie können nicht gleiche div id in einer HTML-Seite angeben, Sie sollten id="testDiv" zu class="testDiv"

HTML ändern.

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

insteed, dass, versuchen

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

und Ihre Funktion sollte

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

}) aussehen;