Question

<script type="text/javascript">
    $(document).ready(function () {
        $("tr.item").each(function () {
            var weight = $(this).children('td.Weight').text();
            var unit = "Kg";
            $(".Weight").text(weight + unit);

            });


    });
</script>
 html code...
  @foreach (var item in Model) {
   <tr class="item">
    <td>
        @Html.DisplayFor(modelItem => item.OrderId)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.CustomerId)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.OrderDate)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.OrderQty)
    </td>
    <td class="Weight">
        @Html.DisplayFor(ModelItem => item.TotalWeight, new { id="TotalWeight"})
    </td>
  </tr>

值继续与它们连接，例如：5000Kg，然后5000KgKg，然后5000KgKgKg等等。我不能考虑当前值，代码考虑所有行。

Answer 1

更改

$(".Weight").text(weight + unit);

到

$(".Weight", this).text(weight + unit);

以便只更改当前行的.Weight单元格。

以下评论的预设：

在这里缓存选择器是没用的，没有任何明显的收益，这会使代码更难以阅读和维护
使用children的速度较慢，这不是很重要。重要的是，使用children不使用类的语义用法，它会使您的代码依赖于.Weight元素是直接子元素而不是例如span的事实。 td。这与您通常更喜欢closest而不是parent。

Answer 2

$(".Weight").text(weight + unit);使用的选择器会选择所有具有“权重”类别的元素，而不仅仅是当前tr元素中的元素。您可以使用$(this).children("td.Weight")找到正确的元素，但只需重用该元素即可。

$("tr.item").each(function () {
  var $weight = $(this).children(".weight"),
      weight = $weight.text(),
      unit = "Kg";

  $weight.text(weight + unit);
});

BTW：我建议您使用较短的选择器，在这种情况下.Weight就足够了，并且与类名一致（使“Weight”小写）。

我的代码工作正常，第一行正确显示，但第二行与第一行连接等

2 个答案: