一定数量的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 <div>元素，每两对都将它们包裹起来，如果有剩余（最后一个），它将被自身包裹起来。

---

或者，让我们使其可重用，作为一个插件：

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>");​

您可以在此处尝试该版本 。