jquery next() function not working

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>