Question

我有一个元素列表，我想用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元素。

有什么想法吗？提前谢谢。

Answer 1

我可能会简单地说：使用您添加的容器循环浏览它们，每次看到break时都添加一个新容器：

var div;
$("selector for the divs").each(function() {
    if (!div) {
        div = $("<div>").insertBefore(this);
    }
    div.append(this);
    if ($(this).hasClass("break")) {
        div = undefined;
    }
});
if (div) {
    $("<div>last break</div>").addClass("break").appendTo(div);
}

示例（我添加了一个wrapper类，因此我们可以在添加时看到效果）：

＆＃13;

$("#go").click(function() {
  var div;
  $("#container > div").each(function() {
    if (!div) {
      div = $("<div>").addClass("wrapper").insertBefore(this);
    }
    div.append(this);
    if ($(this).hasClass("break")) {
      div = undefined;
    }
  });
  if (div) {
    $("<div>last break</div>").addClass("break").appendTo(div);
  }
});

＆＃13;

.test {
  color: blue;
}
.break {
  color: red;
}
.wrapper {
  border: 1px solid #aaa;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="go" value="Go">
<div id="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>

＆＃13;

Answer 2

我认为您也可以这样做：首先再向所有.break父容器插入一个.test，然后正确使用wrapAll方法换行组：

＆＃13;

$('.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>');
});

＆＃13;

.group {
  padding: 3px;
  background: #BFECBE;
  margin-bottom: 2px;
}

＆＃13;

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

＆＃13;

Answer 3

这段代码工作正常，你可以在这里查看小提琴和演示

$("div.test").each(function() {
  if (!$(this).nextAll(".break").length)
    $(".test").last().after('<div class="break">Add last break element</div>');
  if (!$(this).parents(".group").length)
    $(this).add($(this).nextUntil('.break+.test').andSelf()).wrapAll('<div class="group" />');


});

.group {
  background: red;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

});

Fiddle Demo

使用jQuery包装元素组

3 个答案: