jquery next（）函数不工作

Question

我想添加切换到我的循环div类。但它不起作用。 这是我的Html代码。

`

<div class="bookNowBtn selectCar" id="vechile_toggle"> 
    <div class="vechile_toggleCls"> 
     Select 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-12"> 
     <div class="vechile_roomCls" id="vechile_room"> 
      <form> 
       //something goes here 
      </form> 
     </div> 
    </div> 
</div> 

` 这是我的jQuery代码。

`

<script> 
    $(document).ready(function(){ 
     $(".vechile_toggleCls").click(function(){ 
      //alert('hello'); 
      $(this).parent().next().next().next(".vechile_roomCls").slideToggle(); 
     }); 
    }); 
</script> 

`

为什么是我的代码不能正常工作

Answer 1

.next()用来瞄准下一个同级element.You需要使用.find()代替：

$(".vechile_toggleCls").click(function(){ 
    $(this).parent().next().find(".vechile_roomCls").slideToggle(); 
}); 

Working Demo

Answer 2

你正在寻找的元素是单击元素的下一个兄弟的后裔如此

$(document).ready(function() { 
 
    $(".vechile_toggleCls").click(function() { 
 
    //alert('hello'); 
 
    $(this).parent().next().find(".vechile_roomCls").stop().slideToggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="bookNowBtn selectCar" id="vechile_toggle"> 
 
    <div class="vechile_toggleCls"> 
 
    Select 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-md-12"> 
 
    <div class="vechile_roomCls" id="vechile_room"> 
 
     <form> 
 
     //something goes here 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>