Question

我见过其他相关问题，但不太像我的。

我有不同行数的代码块，并希望对这些行进行分组，包括“last”div：

<div class="row"></div>
<div class="row"></div>
<div class="last"></div>
<br>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="last"></div>
<br>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="last"></div>

我想：

<div class="wrapper">
<div class="row"></div>
<div class="row"></div>
<div class="last"></div>
</div>
<br>
<div class="wrapper">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="last"></div>
</div>
<br>
<div class="wrapper">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="last"></div>
</div>

我尝试了各种find，addBefore，wrapAll变种但却无法得到它。

我尝试过各种变体：

$(this).find(".row, .last").wrapAll('<div class="wrapper"></div>');

Answer 1

这是一种方式： -

＆＃13;

//find all the 'first' .row by checking the previous is not a .row
$('.row').prev(':not(.row)').next().each(function() {
  //wrap all next elements until you find something not a div
  $(this).nextUntil(':not(div)').addBack().wrapAll($("<div></div>", {
    class: 'wrapper'
  }));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row"></div>
<div class="row"></div>
<div class="last"></div>
<br>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="last"></div>
<br>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="last"></div>

＆＃13;

Answer 2

我们可以通过组合prevAll和wrapAll来实现这一点。下面是ocde

$("div.last").each(function() {
  $(this).prevAll(".row").addBack().wrapAll("<div class='wrapper' />"); 
});

演示：https://jsfiddle.net/wx8074qn/3/

使用jQuery将不同数量的div分组到同一个类，直到“最后”类

2 个答案: