将输入值乘以 span

Question

这是我的小提琴：

http://jsfiddle.net/19gwk4q6/

HTML:

<ul>
  <li id="1">
    <input type="text" name="1" class="parent" />
    <input type="hidden" name="rank" value="8" class="rank" />
    <span class="result"></span>
  </li>
  <li id="2">
    <input type="text" name="2" class="parent" />
    <input type="hidden" name="rank" value="1.75" class="rank" />
    <span class="result"></span>
  </li>
  <li id="3">
    <input type="text" name="1" class="parent" />
    <input type="hidden" name="rank" value="10" class="rank" />
    <span class="result"></span>
  </li>
</ul>

JS:

$(document).on("change", ".parent", function() {
  var sum = 0;
  $(".parent").each(function() {
    var rank = $("input").next(".rank").val();
    sum = $(this).val() * rank;
  });
  $("input").next(".result").val(sum);
});

我有服务器端生成的列表，我需要将输入值

.parent * .rank

相乘，并将结果放入每个

<li>

的 span.result 中。我试图使用

.closest ()

和

.next()

功能，但它不起作用。

谢谢你的帮助！

Answer 1

从 OP 可以了解到

.result

是一个

span

所以

$("input").next(".result").val(sum);

不会工作，因为

span

没有一个叫做

.val()

的函数，使用

.text()

代替。还有改变

 var rank = $("input").next(".rank").val();

到

var rank = $(this).next(".rank").val();

在这里演示

编辑

基于OP的评论。试试这个

$(document).on("change", ".parent", function() {
    var sum = 0;
    $(".parent").each(function() {
        var rank = $(this).next(".rank").val();
        sum = $(this).val() * rank;
        $(this).parent().find(".result").text(sum);
    });

});

更新的演示

Answer 2

你试过吗

var rank = $(this).siblings(".rank").val();

$(this).siblings(".result").val(sum);