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

You can test it out here，这样做就是抓住那里的所有.item <div>元素，如果剩下的话，每对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>");

You can give that version a try here

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

1 个答案: