Javascript 如何限制页面上的div数？

下面是我的代码，每次单击按钮时循环并添加5个div（“content-section”）。我如何检查有多少内容节，并在页面附加20个内容节后跳过循环

HTML:

新闻标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。两人在一起，一个临时的男人。我的同僚，我的同僚，我的同僚。维瓦摩斯·马蒂斯·埃吉斯塔·洛雷姆·索达莱斯

http://www.lintothenewsarticle.com/news/article/title-of-news-article

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
});

var maxnewscard=20；
$（'.show more'）。单击（函数（）{
对于（变量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）；
$（“#内容新闻容器”）.append（contentNews）；
}
//检查有多少内容节元素，如果有20个，则跳过循环
});

我相信

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

if（$（'.content节'）。长度<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
});

var maxnewscard=20；
$（'.show more'）。单击（函数（）{
if（$（'.content节'）.length

如果我正确理解了这个问题，类似这样的方法应该有效：

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);
    }
}

if（$（'#内容新闻容器'）.children（）.length（）<20）{
对于（变量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）；
$（“#内容新闻容器”）.append（contentNews）；
}
}

以下是一个可能的解决方案：

var maxnewscard=20；
$（'.show more'）。单击（函数（）{
if（$（“#内容新闻容器”）.find（“.news preview”）.length==maxNewsCards）
{
警报（'已达到最大限制。向用户显示消息或执行所需操作'）
返回；
}
对于（变量i=0；i<5；i++）{
var contentNews=$（$（'div.content-section:last'）[0].cloneNode（true））；
$（“#内容新闻容器”）.append（contentNews）；
}
});

新闻标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。两人在一起，一个临时的男人。我的同僚，我的同僚，我的同僚。维瓦摩斯·马蒂斯·埃吉斯塔·洛雷姆·索达莱斯

http://www.lintothenewsarticle.com/news/article/title-of-news-article


再看5个。。。


一种尝试方法可能包括。。。
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);
    }
}