Как разделить контент с помощью jquery после определенного количества divs - PullRequest
Новая
       15

Как разделить контент с помощью jquery после определенного количества divs

0 голосов
/ 01 октября 2010

У меня есть такая форма: 

<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 или как?

Спасибо.

1 Ответ

3 голосов
/ 01 октября 2010

Как-то так будет работать: 

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> и каждыйпара 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>");​

Вы можете попробовать эту версию здесь .

...