我有一个元素列表,我想将它们与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/

10-11 23:29
查看更多