Question

嗨，我一直在寻找解决方案。基本上我有一个重复结构如下：

<div class="article">
    <div>
    </div>
    <h2>
    </h2>
    <div>
    </div>
    <div>
    </div>
 </div>
<div class="article">
    <div>
    </div>
    <h2>
    </h2>
    <div>
    </div>
    <div>
    </div>
 </div>

我需要将.article的最后三个子元素包装在div中，例如

<div class="article">
    <div>
    </div>
    <div class="wrapper">
        <h2>
        </h2>
        <div>
        </div>
        <div>
        </div>
    </div>
 </div>

我尝试过jQuery .before（）和.after（），但是在我可以调用它们之前元素关闭了。这是我最后的努力：

(function($) {
    $(document).ready( function () {
        var items = $(".article > *");
        for(var i = 1; i < items.length; i+=3) {
            items.slice(i, i+3).wrapAll("<div class='wrapper'></div>");
        };
    });
})(jQuery);

这对第一个.article工作正常，但会破坏代码的其余部分。

现实生活中的例子：

http://www.blanketmedia.com.au/Cruise/hotnews.jsp

Answer 1

遍历元素，选择子元素，删除第一个元素，然后将它们包装起来。

$(".article").each( function () {
    $(this).children().slice(1).wrapAll('<div class="wrapper"></div>');
});

.article { background: yellow; }
.wrapper { background: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="article">
    <div>1
    </div>
    <h2>2
    </h2>
    <div>3
    </div>
    <div>4
    </div>
 </div>
<div class="article">
    <div>5
    </div>
    <h2>6
    </h2>
    <div>7
    </div>
    <div>8
    </div>
 </div>

Answer 2

试试这个：

＆＃13;

$('.article *:nth-child(3)').wrap("<div class='wrapper'></div>");

＆＃13;

Answer 3

这是另一种解决方案：

$('.article').each(function(){
  var articleChildren = $(this).children();
  var lastThreeElements = articleChildren.slice(Math.max(articleChildren.length - 3, 1));
  lastThreeElements.wrapAll('<div class="wrapper">');
});

.article { background: yellow; }
.wrapper { background: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="article">
    <div>Div 1
    </div>
    <h2>Header 1
    </h2>
    <div>Inner Div 1
    </div>
    <div>Inner Div 2
    </div>
 </div>
<div class="article">
    <div>Div 1
    </div>
    <h2>Header 1
    </h2>
    <div>Inner Div 1
    </div>
    <div>Inner Div 2
    </div>
 </div>

使用jQuery wrapAll（）包装多个重复元素

3 个答案: