如何限制頁面上的div數量？

Question

這是我的代碼，每單擊一次按鈕，循環遍歷並添加5 div（“內容部分”）。 我將如何檢查其中有多少個內容部分，並在將20個內容部分追加到頁面后跳過循環？

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 -->

jQuery的：

var maxNewsCards = 20;

$('.show-more').click(function () {
    for (var i = 0; i < 5; i++){
        // var contentNews = $('div.content-section:last').prop('outerHTML');
        var contentNews = $($('div.content-section:last')[0].cloneNode(true));
        // console.log("contentNews", contentNews);
        $('#content-news-container').append(contentNews);
    }
    //Check how many content-section elements there are and skip the loop if there are 20
});

Answer 1

我相信

if($('.content-section').length < 20)

應該管用。

var maxNewsCards = 20;

$('.show-more').click(function () {
    if($('.content-section').length < maxNewsCards ){
        for (var i = 0; i < 5; i++){
            // var contentNews = $('div.content-section:last').prop('outerHTML');
            var contentNews = $($('div.content-section:last')[0].cloneNode(true));
            // console.log("contentNews", contentNews);
            $('#content-news-container').append(contentNews);
        }
    }
    //Check how many content-section elements there are and skip the loop if there are 20
});

Answer 2

這是一個可能的解決方案：

 var maxNewsCards = 20; $('.show-more').click(function () { if ($('#content-news-container').find('.news-preview').length == maxNewsCards) { alert('Reached max limit. Display message to user or perform required action') return; } for (var i = 0; i < 5; i++){ var contentNews = $($('div.content-section:last')[0].cloneNode(true)); $('#content-news-container').append(contentNews); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <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 --> <br/> <button class="show-more" type="button">Show 5 more...</button> <br/> <div id="content-news-container"></div> 

Answer 3

如果我正確理解了該問題，則應執行以下操作：

if($('#content-news-container').children().length() < 20) {
    for (var i = 0; i < 5; i++) {
        // var contentNews = $('div.content-section:last').prop('outerHTML');
        var contentNews = $($('div.content-section:last')[0].cloneNode(true));
        // console.log("contentNews", contentNews);

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