2015-11-06 131 views
2

我想添加切換到我的循環div類。但它不起作用。 這是我的Html代碼。jquery next()函數不工作

`

<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> 

`

爲什麼是我的代碼不能正常工作

+0

你有給ID =「vechile_room你可以使用DIV ID而不是它「 as $(」#vechile_room「)。slideToggle(); – prashant

+0

Id僅切換循環語句中的第一個div。所以,我使用了類 – vijayrana

回答

2

.next()用來瞄準下一個同級element.You需要使用.find()代替:

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

Working Demo

+0

感謝Milind Anantwar,這段代碼對我來說也很完美 – vijayrana

+0

@vijayrana:很高興它有幫助 –

1

你正在尋找的元素是單擊元素的下一個兄弟的後裔如此

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

+0

感謝Arun P Johny,我現在已經開始工作了 – vijayrana