title: Why is :lt() not working as expected?
body: <p>Could you please tell me why <code>:lt()</code> is not working. Here is my code: 
  <a href="https://jsbin.com/refunuyahe/edit?html,js,output" rel="nofollow noreferrer">https://jsbin.com/refunuyahe/edit?html,js,output</a></p>
  
  <p>I try to show only <code>100</code> items at first, and when the user scrolls it should show a further 100 items.</p>
  
  <pre class="lang-js prettyprint-override"><code>(function() {
    'use strict';
    $(function() {
      var str = '&lt;ul id="myList"&gt;';
      var x = 100;
      var initialData = '';
      for (var i = 0; i &lt; 1000; i++) {
        str += '&lt;li&gt;' + i + '&lt;/li&gt;';
  
      }
      str += '&lt;/ul&gt;'
      // complete data in str;
      // load only first 100 element
      $('#container').append(str);
  
      $('#myList li:lt(' + x + ')').show();
    })
  
    $('#container').on('scroll', function() {
      if ($(this).scrollTop() + $(this).innerHeight() &gt;= $(this)[0].scrollHeight) {
        x += 100;
        $('#myList li:lt(' + x + ')').show();
      }
    })
  })();
  </code></pre>
  
  <p>Why is this line not working?</p>
  
  <pre><code>$('#myList li:lt(' + x + ')').show();
  </code></pre>