Question

我的代码在下面运行，以便在单击“.show-more”按钮时将正确的div附加到页面。我希望每次单击此按钮时能够追加其中5个div，但不知道该怎么做？

HTML

<div class="content-section news-preview clearfix">
    <div class="title">Title of News Article</div>
    <div class="clearfix">
        <div class="image-container">
            <img src="images/news_sample208x135.jpg" width="208" height="135">
        </div>
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dui luctus lectus eget libero volupat, a tempor velit malesuada. Lorem ipsum dolor sit amet, conectetur adipiscing elit. Vivamus mattis egestas lorem a sodales.</p>
        </div>
    </div>
    <a class="article-link">http://www.lintothenewsarticle.com/news/article/title-of-news-article</a>
</div>
<!-- /content-section -->
<div class="show-more-container">
    <div id="content-news-container"></div>
    <button class="btn show-more">Show 5 More</button>
</div>

的jQuery

$('.show-more').click(function() {
    var contentNews = $('div.content-section:last').prop('outerHTML');

    console.log("contentNews", contentNews);

    $('#content-news-container').append(contentNews).slideDown(slow);
});

Answer 1

您可以使用DocumentFragment以有效的方式一次追加所有元素

$('.show-more').click(function () {
    var contentNews = $('div.content-section:last').prop('outerHTML');
    var frag = document.createDocumentFragment();
    for (var i = 0; i < 5; i++) {
      frag.appendChild($(contentNews).get(0));
    }

    $('#content-news-container').append(frag).slideDown(slow);
});

编辑：小提琴 - http://jsfiddle.net/sc5585x7/

Answer 2

只需创建一个循环并克隆DIV五次：

$('.show-more').click(function () {
    for (var i = 0; i < 5; i++) {
        var contentNews = $($('div.content-section:last')[0].cloneNode(true));
        $('#content-news-container').append(contentNews).slideDown('slow');
    }    
});

在这里小提琴：http://jsfiddle.net/ToddT/364y88af/

修改

正如所指出的那样，使用DocumentFragment是进行此类操作的更有效方法：

$('.show-more').click(function () { var contentNews = $('div.content-section:last').prop('outerHTML'); var frag = document.createDocumentFragment(); for (var i = 0; i < 5; i++) { frag.appendChild($(contentNews).get(0)); } $('#content-news-container').append(frag).slideDown(slow); });

Per @Travis Kaufman的回答。

一次附加5个div？

2 个答案: