using jquery 'this' methods

Question

how many parameters are there in jquery for below example how do I have to use this

I have two select box and both of them are same if I change value of my select 1 another select has been chancing too and this is something that should not be that's why I want to prevent this how can I do that ?

$(document).ready(function() {
  $(".person-1, .person-2").change(function() {
    var val1 = parseInt($('.person-1').find(":selected").text()),
      val2 = parseInt($('.person-2').find(":selected").text());

    $(".addition-1").text(val1);
    $(".addition-2").text(val2);

    $(".addition").text(val1 + val2);

  });
});

select {
  width: 150px;
  height: 40px;
}

.personBox {
  background: #FFF;
  width: 350px;
  border: 1px solid #ccc;
  padding: 10px;
  float: left;
  margin-right: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="personBox">
  <h2>SELECT 1</h2>
  <select class="person-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <select class="person-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <p>Add 1: <span class="addition-1"></span></p>
  <p>Add 2: <span class="addition-2"></span></p>
  <p>Addition : <span class="addition"></span> </p>
</div>
<!-- personBox-->
<div class="personBox">
  <h2>SELECT 2</h2>
  <select class="person-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <select class="person-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <p>Add 1: <span class="addition-1"></span></p>
  <p>Add 2: <span class="addition-2"></span></p>
  <p>Addition : <span class="addition"></span> </p>
</div>
<!-- personBox-->

Read [How does the “this” keyword work?](http://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — roetnig, Mar 08 '17 at 07:31

score 5 · Accepted Answer · answered Mar 08 '17 at 07:30

you must provide a context which to find the elements not find elements in the document.

$(document).ready(function() {
  $(".person-1, .person-2").change(function() {
    var context=$(this).closest('div');
    var val1 = parseInt($('.person-1',context).find(":selected").text()),
      val2 = parseInt($('.person-2',context).find(":selected").text());

    $(".addition-1",context).text(val1);
    $(".addition-2",context).text(val2);

    $(".addition",context).text(val1 + val2);

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="personBox">
  <h2>SELECT 1</h2>
  <select class="person-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <select class="person-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <p>Add 1: <span class="addition-1"></span></p>
  <p>Add 2: <span class="addition-2"></span></p>
  <p>Addition : <span class="addition"></span> </p>
</div>
<!-- personBox-->
<div class="personBox">
  <h2>SELECT 2</h2>
  <select class="person-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <select class="person-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <p>Add 1: <span class="addition-1"></span></p>
  <p>Add 2: <span class="addition-2"></span></p>
  <p>Addition : <span class="addition"></span> </p>
</div>
<!-- personBox-->

the answer that I looking for thanks a lot and example very clarify +1 — ani_css, Mar 08 '17 at 07:32
@recruit_man If the answer helped solving your problem, try to accept it as correct answer.. — VPK, Mar 08 '17 at 07:34

using jquery 'this' methods

1 Answers1