如何使用jQuery將元素的文本替換為特定父標記中的另一個元素的值？

Question

高級：如何用特定父標記中另一個元素的值替換一個元素的文本？

具體：使用下面的HTML，我想用“ input.someOtherNumber”的值替換“ span.number”的html。 我可以在頁面上使用多個列表項，因此需要使用父級來縮小范圍。

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

以下JS可以將“ span.number”的值替換為“ inout.someOtherNumber”的值，但它並不限於父級。 如何將其限制在父級？

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

編輯：

如果輸入包含在跨度中，那么我該如何完成呢？ 我確實在尋找一種檢查父級的解決方案，因為在我的實際代碼中，我具有可以相互嵌套的multipul元素，因此“ .sibling”或“ .prev / .next”將無法工作。 更新后的HTML如下所示：

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

您可以在這里看到它： http : //jsfiddle.net/8bXbx/

Answer 1

更換：

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

帶有：

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

..弗雷德里克

Answer 2

您可以使用兄弟姐妹 ：

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

示例： http ： //jsfiddle.net/jonathon/j9aaX/

另外，由於this是HTML Input元素，因此您可以使用this.value來訪問值。

---

只是為了回復您的評論。 為了獲得基於公共父元素的元素，您將使用closest的樹將樹上移到父元素，然后使用children元素返回樹下並獲得所需的元素。

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

示例： http ： //jsfiddle.net/jonathon/j9aaX/1/