Question

我需要在第二个模块之后放置一个包装所有模块。

<div class="show">
    <div class="module">some content</div>
    <div class="module">some content</div>
    <div class="module">some content</div>
    <div class="module">some content</div>
</div>

我需要的是

<div class="show">
    <div class="module">some content</div>
    <div class="module">some content</div>

     <h4 class="more">View More</h4>
    <div class="show-more">
        <div class="module">some content</div>
        <div class="module">some content</div>
    </div>
</div>

我可以计算模块的数量，但我不知道如何将html追加/前置到超出1索引的div。

$('.show').each(function(i) { 
        var n = $(this).children('.module').length;
    });

我应该提一下，我需要多个“show”div，每个div都需要有自己的模块。所以它需要分别在每个“show”div上发生。一个循环可能吗？

Answer 1

使用.slice：

$('.module').slice(2).wrapAll('<div class="show-more" />');
$('.show-more').before('<h4> Show more </h4>')

http://jsfiddle.net/tBq5U/1/

多个模块：

$('.show').each(function(){
    $(this).find('.module').slice(2).wrapAll('<div class="show-more" />')
    .parent().before('<h4> Show more </h4>');
})

http://jsfiddle.net/tBq5U/2/

Answer 2

您希望将jQuery wrapAll()方法与:gt()选择器结合使用。

:gt()选择器选择大于某个索引的元素，在您的情况下1（基于0的计数）

JSFiddle 示例。

更新以包含有关单独的.show div的新信息：

见下面的代码：

$(".show").each(function (i, v) {
    $(v).children(":gt(1)").wrapAll("<div class='showMore'/>");
});

Answer 3

$(".show").each(function() {
    $(".module:gt(1)", this)
            .wrapAll('<div class="show-more" />')
            .first()
            .parent()
            .before('<h4 class="more">View More</h4>');
});

fiddle

在另一个div中包装超过3rd div的所有内容

3 个答案: