将输入值乘以跨度

Question

这是我的 fiddle:

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 没有名为 [=17= 的函数] 使用 .text() 代替。并更改

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

至

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

DEMO HERE

编辑

基于 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);
    });

});

UPDATED DEMO

Answer 2

你试过了吗

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

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

将输入值乘以跨度

Multiply input values into span

jquery

multiplication

next

closest