CODEWITHSUNDEEP
javascriptjquery
Behseini
Behseini

Reputation: 6330

How to target closest class

I am working on the below code. Why am I not able to target the closets .inp2?

$('.inp-1').focusout(function() {
  $(this).closest(".inp-2").css({
    "background": "green",
    "border": "2px solid red"
  });
});
.inp-2 {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <input type="text" class="inp-1" id=""  placeholder="" /> Input 1
  <input type="text" class="inp-2" id=""  placeholder="" /> Input 2
</div>

<div class="row">
  <input type="text" class="inp-1" id=""  placeholder="" /> Input 1
  <input type="text" class="inp-2" id=""  placeholder="" /> Input 2
</div>

Upvotes: 1

Views: 41

Answers (1)

The Process
The Process

Reputation: 5953

You should use .next() instead, because .closest() is looking up the DOM:

$('.inp-1').focusout(function() {
   $(this).next(".inp-2").css({
     "background": "green",
     "border": "2px solid red"
   });
 });


Check the below snippet 

 $('.inp-1').focusout(function() {
   $(this).next(".inp-2").css({
     "background": "green",
     "border": "2px solid red"
   });
 });
.inp-2 {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <input type="text" class="inp-1" id="" placeholder="" />Input 1
  <input type="text" class="inp-2" id="" placeholder="" />Input 2
</div>

<div class="row">
  <input type="text" class="inp-1" id="" placeholder="" />Input 1
  <input type="text" class="inp-2" id="" placeholder="" />Input 2
</div>

Upvotes: 5

Related Questions