我怎样才能申请最接近 jquery？

Question

我希望能够单独（分别）计算第 1 节、第 2 节和第 3 节。

此源中仅计算第 1 节，但第 2 节和第 3 节不起作用。

如何分别计算第 1 节、第 2 节和第 3 节？

p.s : 部分的数量可能会改变。

$(".btn-primary").on( "click", function(event) {
  var $final = parseFloat($("#final").val());
  var $first = parseFloat($("#first").val());

  $('#is_nums').text($final - $first);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  Section 1
  <h4>A : <input type="text" name="final" id="final" value="">
  <h4>B : <input type="text" name="first" id="first" value="">
  <button class="btn btn-primary" name="calc">confirm</button>
  <b>calc</b> : <label id="is_nums"></label></h4>

  Section 2
  <h4>A : <input type="text" name="final" id="final" value="">
  <h4>B : <input type="text" name="first" id="first" value="">
  <button class="btn btn-primary" name="calc">confirm</button>
  <b>calc</b> : <label id="is_nums"></label></h4>

  Section 3
  <h4>A : <input type="text" name="final" id="final" value="">
  <h4>B : <input type="text" name="first" id="first" value="">
  <button class="btn btn-primary" name="calc">confirm</button>
  <b>calc</b> : <label id="is_nums"></label></h4>

Answer 1

一切都是关于 HTML 的良好嵌套结构。
如果您以这种方式组织您的 HTML 代码，那么 JS 将变得清晰透明，无需使用 .prev() 或其他在较小的 HTML 修改后可能停止工作的东西。
你不应该依赖元素的顺序，你应该依赖它的逻辑结构。

Class 命名是根据 BEM，您可以遵循任何其他准则，没关系。

$(".my-section__calc").on("click", function(event) {
  var $section = $(this).closest(".my-section");

  var final = parseFloat($section.find(".my-section__final").val());
  var first = parseFloat($section.find(".my-section__first").val());

  $section.find(".my-section__result").text(final - first);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<div class="my-section">
  <h5>Section 1</h5>

  A: <input type="number" class="my-section__final" name="final" value="0"><br/>
  B: <input type="number" class="my-section__first" name="first" value="0"><br/>
  <button class="my-section__calc">confirm</button><br/>
  <b>calc</b>: <label class="my-section__result"></label>
</div>

<div class="my-section">
  <h5>Section 2</h5>

  A: <input type="number" class="my-section__final" name="final" value="0"><br/>
  B: <input type="number" class="my-section__first" name="first" value="0"><br/>
  <button class="my-section__calc">confirm</button><br/>
  <b>calc</b>: <label class="my-section__result"></label>
</div>

<div class="my-section">
  <h5>Section 3</h5>

  A: <input type="number" class="my-section__final" name="final" value="0"><br/>
  B: <input type="number" class="my-section__first" name="first" value="0"><br/>
  <button class="my-section__calc">confirm</button><br/>
  <b>calc</b>: <label class="my-section__result"></label>
</div>

我怎样才能申请最接近 jquery？

How can I apply closest to jquery?

javascript

jquery

closest

p.s : 部分的数量可能会改变。