如何在一定数量的div之后使用jquery分割内容

Question

我有一个这样的表单：

<div class="content">
  <form>
    <div class="item">
      blablaform stuf
    </div>
    <div class="item">
      blablaform stuf
    </div>
    <div class="item">
      blablaform stuf
    </div>
    <div class="item">
      blablaform stuf
    </div>
  </form>
</div>

现在我想将一些项目 div 包装在表单内。基本上是这样的：

<div class="content">
  <form>
    <div class="wrapper">
      <div class="item">
        blablaform stuf
      </div>
      <div class="item">
        blablaform stuf
      </div>
    </div>
    <div class="wrapper">
      <div class="item">
        blablaform stuf
      </div>
      <div class="item">
        blablaform stuf
      </div>
    </div>
  </form>
</div>

我怎样才能用 jQuery 做到这一点？ append()？ :nth-child 或者如何？

谢谢。

Answer 1

像这样的东西会起作用：

var elems = $(".content div.item");
for(var i = 0; i < elems.length; i+=2) {
  elems.slice(i, i+2).wrapAll("<div class='wrapper'></div>");
}

你可以在这里测试它，它的作用是抓取所有.item

元素在那里，每对 2 包裹它们，如果有任何剩余（最后一个）它将被自己包裹。

---

或者，让我们将其作为插件可重用：

jQuery.fn.wrapSet = function (interval, wrapElem) {
  for(var i = 0; i < this.length; i+=interval) {
    this.slice(i, i+interval).wrapAll(wrapElem);
  }
  return this;
};

然后您可以这样调用它：

$(".content div.item").wrapSet(2, "<div class='wrapper'></div>");​

您可以提供该版本在这里尝试一下。