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();

编辑：

如果输入包含在跨度中，那么我该如何完成它？我真的在寻找一个检查父级的解决方案，因为在我的实际代码中我有多个元素可以互相嵌套，所以“.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

您可以使用siblings：

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

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

此外，由于this是HTML输入元素，因此您只需使用this.value

访问该值

回复你的评论。为了获得基于公共父元素的元素，您可以使用closest将树向上移动到父元素，然后使用children返回树中并获取所需的元素。

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

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

如何使用jQuery将元素的文本替换为特定父标记内的另一个元素的值？

2 个答案: