div div divs後

我想包裝下面的div之後按下div與javascript/jquery通過點擊按鈕隱藏行。觸發後我有多個按鈕和多行。div div divs後

<div class="button"> </div> 
<div class="row"></div> 
<div class="row"></div> 
<div class="row"></div> 
<div class="row"></div> 

<div class="button"> </div> 
<div class="row"></div> 
<div class="row"></div> 
<div class="row"></div> 
<div class="row"></div> 
...

我想實現

<div class="button"> </div> 
<div class="wrapper"> 
    <div class="row"></div> 
    <div class="row"></div> 
    <div class="row"></div> 
    <div class="row"></div> 
</div> 

<div class="button"> </div> 
    <div class="wrapper"> 
    <div class="row"></div> 
    <div class="row"></div> 
    <div class="row"></div> 
    <div class="row"></div> 
    </div>

謝謝！我只需要知道如何包裝所有按鈕的事情很容易。（希望）

來源

2017-05-11 meck373

這並不需要換行 - 只是.button增加一個額外的動態類，然後隱藏下面的CSS規則使用一般的兄弟組合子.row基於此的元素。 '.button.hide-children〜.row {display：none; } – CBroe

（一般兄弟組合可以幫助選擇要包裝在jQuery中的元素，如果你堅持這樣做。） – CBroe

嗨Cbroe - 感謝css解決方案，但它隱藏所有行不僅僅是一次後按鈕。 – meck373

我有解決方案：

$('.button').each(function() { 
     $(this).nextUntil('button').wrapAll('<div class="wrapper"></div>'); 
    });

來源

2017-05-11 19:12:51 meck373

Darn，你是對的 - 並不像我認爲它使用純CSS那麼容易。正在努力工作。類似於包裝（https://jsfiddle.net/u9kqh6ee/） - 但最終以比您更復雜的解決方案...已經錯過了nextUntil的存在，謝謝！ – CBroe

謝謝，但在這個:(2）（2h）:( – meck373

雖然，因爲我們現在都發現.nextUntil ;-)，我們可以再次取消包裝 - 並簡單地使用'$（this）.nextUntil（'。button'）。toggle（）;'在按鈕點擊處理程序切換顯示緊隨其後的行... https://jsfiddle.net/u9kqh6ee/1/ – CBroe

回答

相關問題