Wie ersetzt man den Text eines Elements mit dem Wert eines anderen innerhalb eines bestimmten Eltern-Tags mit jQuery?

Question

High-Level: Wie ersetze ich den Text eines Elements durch den Wert eines anderen innerhalb eines bestimmten Eltern-Tags?

Spezifisch: Mit dem HTML unten möchte ich die HTML von "span.number" durch den Wert von "input.someOtherNumber" ersetzen. Ich kann diese Listenelemente auf einer Seite multiplizieren, sodass sie mit dem übergeordneten Element eingegrenzt werden muss.

<ul> 
<li class="list-item"> 
    <span class="number">0</span> 
    <input class="someOtherNumber" type="text" value="10" /> 
</li> 

<li class="list-item"> 
    <span class="number">0</span> 
    <input class="someOtherNumber" type="text" value="99" /> 
</li> 
</ul> 

Die folgende JS arbeitet den „span.number“ Wert mit dem Wert von „inout.someOtherNumber“ zu ersetzen, aber es macht es nicht auf die Eltern begrenzen. Wie kann ich es auf die Eltern beschränken?

$(".someOtherNumber").keyup(function() { 
     var value = $(this).val(); 
     $(".number").text(value); 
    }).keyup(); 

EDIT:

Wenn die Eingabe in einer Spanne dann gewickelt, wie kann ich es erreichen? Ich suche wirklich nach einer Lösung, die nach einem Elternteil sucht, weil ich in meinem echten Code Multipul-Elemente habe, die ineinander geschachtelt werden können, so dass die ".sibling" oder ".prev/.next" nicht funktionieren. Die aktualisierte HTML würde wie folgt aussehen:

<ul> 
<li class="list-item"> 
    <span class="number">0</span> 
    <span><input class="someOtherNumber" type="text" value="10" /></span> 
</li> 

<li class="list-item"> 
    <span class="number">0</span> 
    <span><input class="someOtherNumber" type="text" value="99" /></span> 
</li> 
</ul> 

Sie können es hier sehen: http://jsfiddle.net/8bXbx/

Answer 1

Sie können verwenden siblings:

$(".someOtherNumber").keyup(function() { 
    $(this).siblings(".number").text(this.value); 
}).keyup(); 

Beispiel: http://jsfiddle.net/jonathon/j9aaX/

Auch, weil this ein HTML-Eingabeelement ist, können Sie nur den Wert zugreifen this.value

---

Nur in Antwort auf deinen Kommentar verwenden. Um das Element basierend auf dem gemeinsamen Elternelement zu erhalten, verwenden Sie closest, um die Baumstruktur zum übergeordneten Element zu navigieren und dann children, um wieder in die Struktur zurückzukehren und das gewünschte Element zu erhalten.

$(".someOtherNumber").keyup(function() { 
    $(this).closest(".list-item").children(".number").text(this.value); 
}).keyup(); 

Beispiel: http://jsfiddle.net/jonathon/j9aaX/1/

Answer 2

ersetzen:

$(".number").text(value); 

mit:

$(this).prev(".number").text(value); 

..fredrik