jquery next() 函数不起作用答案

【问题标题】：jquery next() function not workingjquery next() 函数不起作用
【发布时间】：2016-02-07 05:17:29
【问题描述】：

我想将切换添加到我的循环 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>

为什么我的代码不起作用

【问题讨论】：

您可以使用 div id 代替它，因为您将 id="vechile_room" 设为 $("#vechile_room").slideToggle();
Id 只切换循环语句中的第一个 div。所以，我用了类

标签： jquery parent next

【解决方案1】：

.next() 用于定位下一个兄弟元素。您需要改用.find()：

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

Working Demo

【讨论】：

感谢 Milind Anantwar，这段代码也很适合我
@vijayrana：很高兴它有帮助

【解决方案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>

【讨论】：