Setting a max count with jquery each function

Question

I have the following code to retrieve items from an RSS feed:

    function loadData()
    {
        $(xml).find("item").each(function ()
        {
            var title = $(this).find("title").text();
            var description = $(this).find("description").text();
            var linkUrl = $(this).find("guid").text();
            var link = "<br/>" + "<a href='" + linkUrl + "'class='rssLink button-color' target='_blank'>Read More</a>";
            //$('#feedContainer').append('<article id=' + "'rss-item'>" + '<h3>' + title + '</h3><p>' + description + link + '</p>');
            $('#feedContainer').append('<article id=' + "'rss-item'>" + '<h3><a href="' + linkUrl + '">' + title + '</a></h3><p>' + description + '</p>');
        });
    }

The problem, however, is that the feed is way too long and I am not sure how I can display only a set amount of items. How can I go about setting the max number of items to display?

Answer 1

Try using a counter:

var max = 100;
$(xml).find("item").each(function (i) {
   // i --> zero based counter
   if (i < max) {
      // Do your stuff
   } else {
     return false;
   }
});

EXAMPLE

var max = 5;
$('li').each(function(i) {
  if (i < max) {
    $(this).css('color', 'red');
  } else {
     return false;
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
</ul>