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

回答

相关问题