有针对最近等级的问题

Question

你能不能看看这个演示,让我知道为什么我无法定位壁橱 .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>

Answer 1

你应该使用.next()代替,因为.closest()正在查找DOM:

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

请查看以下代码段

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