Question

我正在寻找一种解决方案来将元素包装在两个元素中，其中外部可以包含任何形式的元素，即元素可以是偶数或奇数。请建议一个更像是插件解决方案的解决方案。

当前结构

<div class="outer-wrap-1">
    <h1>Some Heading</h1>
    <p>Some text</p>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="outer-wrap-2">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="outer-wrap-3">
    <div class="item"></div>
    <p>Some text</p>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

我想要一些jQuery Solution来获取结果

<div class="outer-wrap-1">
    <div class="row">
        <h1>Some Heading</h1>
        <p>Some text</p>
    </div>
    <div class="row">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="row">
        <div class="item"></div>
    </div>
</div>
<div class="outer-wrap-2">
    <div class="row">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="row">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="row">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>
<div class="outer-wrap-3">
    <div class="row">
        <div class="item"></div>
        <p>Some text</p>
    </div>
    <div class="row">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="row">
        <div class="item"></div>
    </div>
</div>

Answer 1

使用children（），slice（）和wrapAll（）

＆＃13;

// add some text to empty items for demo
$('.item').text(function(i) {return 'Item ' + (i + 1)});

// wrapping plugin
$.fn.wrapChildren = function(opts) {
  return this.each(function() {
    var $children = $(this).children();
    for (var i = 0; i < $children.length; i = i + opts.numItems) {
      $children.slice(i, i + opts.numItems)
               .wrapAll('<div class="' + opts.className + '">');
    }
  });
}


$('.outer-wrap-1, .outer-wrap-2, .outer-wrap-3')
     .wrapChildren({className: 'row', numItems:2});

＆＃13;

.row {
  border: 1px solid #ccc;
  margin: 5px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer-wrap-1">
  <h1>Some Heading</h1>
  <p>Some text</p>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="outer-wrap-2">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="outer-wrap-3">
  <div class="item"></div>
  <p>Some text</p>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

＆＃13;

在div javaScript / jQuery（complex）中换行元素对

1 个答案: