Как ограничить количество разделов на странице?

Question

Вот мой код, который проходит цикл и добавляет 5 разделов («контент-раздел») каждый раз, когда нажимается кнопка. Как я могу проверить, сколько там разделов контента и пропустить цикл, когда к странице добавлено 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

Вот возможное решение:

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>