Fabien.K Fabien.K - 15 days ago 8
Javascript Question

How can I apply closest to jquery?

I want to be able to calculate Section 1, Section 2, and Section 3 individually(separately).


in this source only Section 1 calculated, but Section 2 and Section 3 do not work.


How can I calculate Section 1, Section 2, and Section 3 individually?



p.s : The number of sections may change.





$(".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

It is all about a good, nested structure of HTML.
If you organize your HTML-code this way, then JS will become clear and transparent, without using .prev() or other things which can stop working after minor HTML modifications.
You should not rely on order of elements, you should rely on its logical structure.

Class namings are according to BEM, you can follow any other guidelines, it doesn't matter.

$(".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>