使用jQuery包装元素组

Wrap groups of elements using jQuery

本文关键字：元素 包装 jQuery 使用      更新时间：2023-09-26

我有一个元素列表，我想用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:时添加一个新容器

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类，这样我们可以在添加时看到效果）：

$("#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);
  }
});
.test {
  color: blue;
}
.break {
  color: red;
}
.wrapper {
  border: 1px solid #aaa;
}
<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>

我认为您也可以这样做：首先向所有.test父容器再插入一个.break，然后使用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>

此代码运行良好，您可以在此处查看fiddle和demo以及

$("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演示

相关文章：