我有一个元素列表,我想将它们与div分组,从第一个元素开始,以BREAK类结束,然后在BREAK类之后开始一个新组。
所以下面的代码
<div class="test">Test 0</div>
<div class="test">Test 1</div>
<div class="break">Break 0</div>
<div class="test">Test 2</div>
<div class="test">Test 3</div>
<div class="break">Break 1</div>
<div class="test">Test 4</div>
<div class="test">Test 5</div>
<div class="test">Test 6</div>
会成为,
<div>
<div class="group">
<div class="test">Test 0</div>
<div class="test">Test 1</div>
<div class="break">Break 0</div>
</div>
<div class="group">
<div class="test">Test 2</div>
<div class="test">Test 3</div>
<div class="break">Break 1</div>
</div>
<div class="group">
<div class="test">Test 4</div>
<div class="test">Test 5</div>
<div class="test">Test 6</div>
<div class="break">Add last break element</div>
</div>
<div>
并在最后一组中添加div元素。
有任何想法吗?提前致谢。
最佳答案
我认为您也可以执行以下操作:首先在所有.break
父容器中插入一个.test
,然后正确使用wrapAll
方法包装组:
$('.test').parent().append('<div class="break">Break 2</div>').
find('.test + .break').each(function() {
$(this).prevUntil('.break, .group').add(this).wrapAll('<div class="group"></div>');
});
.group {
padding: 3px;
background: #BFECBE;
margin-bottom: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="test">Test 0</div>
<div class="test">Test 1</div>
<div class="break">Break 0</div>
<div class="test">Test 2</div>
<div class="test">Test 3</div>
<div class="break">Break 1</div>
<div class="test">Test 4</div>
<div class="test">Test 5</div>
<div class="test">Test 6</div>
</div>
关于javascript - 使用jQuery包装元素组,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26828202/