Question

这是我的代码，每次点击一个按钮时，它会遍历并添加5个div（＆＃39; content-section＆＃39;）。我将如何检查有多少内容部分，并在页面上附加了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

如果我正确理解这个问题，这样的事情应该有效：

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

Answer 3

这是一个可能的解决方案：

＆＃13;

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

＆＃13;

X'A6'

＆＃13;

如何限制页面上的div数？

3 个答案: