Question

希望将子项包装在各自的div中。这适用于较旧的jQuery 1.x，而不是较新的3.x jQuery。尝试最终将.group项目包装为手风琴样式会使每个页面视图的下拉倍数下降。

所以.group的每个分组都会在它们周围有一个div。

$(".group").each(function() {
	if (!$(this).prev().hasClass("group")) {
		return $(this).nextUntil(":not(.group)").andSelf();
	}
}).wrap("<div class='wrap' />");

.wrap {border: 5px dotted #ff0000;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p class="item">Item 1</p>
<p class="item">Item 2</p>
<p class="item group">Item 3</p>
<p class="item group">Item 4</p>
<p class="item">Item 5</p>
<p class="item group">Item 6</p>
<p class="item group">Item 7</p>
<p class="item group">Item 8</p>
<p class="item">Item 9</p>

尝试了自动包装和无用包装。

Answer 1

.andSelf()已在jQuery 3.0中删除，您必须使用.addBack()

àndSelf（）的文档中明确提及：

注意：该函数已被弃用，现在是.addBack（）的别名，应与jQuery 1.8及更高版本一起使用。

它又在工作...

$(".group").each(function() {
  if (!$(this).prev().hasClass("group")) {
    return $(this).nextUntil(":not(.group)").addBack();
  }
}).wrap("<div class='wrap' />");

.wrap {
  border: 5px dotted #ff0000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p class="item">Item 1</p>
<p class="item">Item 2</p>
<p class="item group">Item 3</p>
<p class="item group">Item 4</p>
<p class="item">Item 5</p>
<p class="item group">Item 6</p>
<p class="item group">Item 7</p>
<p class="item group">Item 8</p>
<p class="item">Item 9</p>

编辑

要将所有连续的.group元素包装在.wrap div中：

我想出的解决方案使用两个循环和两个数组。

首先是找到“边界”。
第二个方法是用包含它们的div替换连续的.group元素。

查看代码中的注释：

    // Find the first and last of a serie of .group elements
    var isFirst = [];
    var isLast = [];

    // Loop thought all .item
    $(".item").each(function(){
      // Find a fist of a serie
      if (!$(this).prev().hasClass("group") && $(this).hasClass("group")) {
        console.log( "FIRST: " +$(this).text() );
        isFirst.push( $(this) );
      }
      // Find a last of a serie
      if (!$(this).next().hasClass("group") && $(this).hasClass("group")) {
        console.log( "LAST: " +$(this).text() );
        isLast.push( $(this).next() );  // Adding the next element, which IS NOT .group
      }
    });

    // Loop throug all the "first" element to replace them + all nextUntil by a wrapper element containing them all.
    isFirst.forEach(function(element, index){
      // Create the wrapper
      var wrapper = $("<div class='wrap'>");
      // Keep the previous in memory
      var previous = element.prev();
      // Append all elements until (not including) the one after the last.
      element.nextUntil(isLast[index]).addBack().each(function(){
        wrapper.append( $(this) )
      });
      // Append !
      previous.after(wrapper);
    });

.wrap {
  border: 5px dotted #ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="item">Item 1</p>
<p class="item">Item 2</p>
<p class="item group">Item 3</p>
<p class="item group">Item 4</p>
<p class="item">Item 5</p>
<p class="item group">Item 6</p>
<p class="item group">Item 7</p>
<p class="item group">Item 8</p>
<p class="item">Item 9</p>

以全页模式运行；）

CodePen。

jQuery在div中包装子项组

1 个答案: