title: Cannot get the last child of a class jquery
body: <p>So I am implementing loading more data when users scroll pass a div in my index page. </p>
  
  <p>My div to contain data:</p>
  
  <pre><code>&lt;div class="container-fluid" id="post-data"&gt;
  
  &lt;/div&gt;
  
  &lt;div class="ajax-load text-center" style="display:none"&gt;
      &lt;p&gt;&lt;img src="http://demo.itsolutionstuff.com/plugin/loader.gif"&gt;Loading More post&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My jQuery script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          var first_id = &lt;?php require_once 'php/functions.php'; echo get_smallest_post_id();?&gt;;
          loadMoreData(first_id);
          $(document).on('scroll', function () {
              if ($(this).scrollTop() &gt;= $('#post-data').position().top) {
                  var last_id = $('#post-data').children('.row').last().id;
                  loadMoreData(last_id);
                  alert(last_id);
              }
          });
      });
      //Ajax load function
      function loadMoreData(last_id){
          $.ajax(
              {
                  url: 'php/article.php?last_id=' + last_id,
                  type: "post",
                  beforeSend: function()
                  {
                      $('.ajax-load').show();
                  }
              })
              .done(function(data)
              {
                  $('.ajax-load').hide();
                  $("#post-data").append(data);
              })
              .fail(function(jqXHR, ajaxOptions, thrownError)
              {
                  alert('server not responding...');
              });
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>My article.php just return some rows:</p>
  
  <pre><code>&lt;?php
  ..... (Fetch data in database)
  while ($post = $select-&gt;fetch_assoc()) {
  ?&gt;
  &lt;div class="row" id="&lt;?php echo $post_id ?&gt;"&gt;
      &lt;div class="col-sm-4"&gt;&lt;a href="#" class=""&gt;&lt;img src="&lt;?php echo $first_image_src ?&gt;" class="img-responsive"&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-8"&gt;
          &lt;h3 class="title"&gt;&lt;?php echo $title ?&gt;&lt;/h3&gt;
          &lt;p class="text-muted"&gt;&lt;span class="glyphicon glyphicon-lock"&gt;&lt;/span&gt; Available Exclusively for Premium
              Members&lt;/p&gt;
          &lt;p&gt;&lt;?php echo $description ?&gt;&lt;/p&gt;
          &lt;p class="text-muted"&gt;Presented by &lt;a href="#"&gt;&lt;?php echo $username ?&gt;&lt;/a&gt;&lt;/p&gt;
          &lt;button onclick="window.location.href='https://infs3202-c25wl.uqcloud.net/travnow/content.php?id=&lt;?php echo $post_id ?&gt;'" id="btnReadmore" type="submit" class="btn btn-primary"&gt;Read More&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;hr&gt;
  &lt;? } ?&gt;
  </code></pre>
  
  <p>My page currently can load the first two articles, but then there is a problem when users scroll pass the <strong>#post-data</strong> div. It keeps showing <strong>"undefined"</strong> when i alert <strong>var last_id</strong></p>
  
  <pre><code>if ($(this).scrollTop() &gt;= $('#post-data').position().top) {
     var last_id = $('#post-data').children('.row').last().id;
     alert(last_id);
  }
  </code></pre>
  
  <p>Inspect result:</p>
  
  <p><a href="https://i.stack.imgur.com/7db0s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7db0s.png" alt="enter image description here"></a></p>
  
  <p>I also tried:</p>
  
  <pre><code>var last_id = $(".row:last").attr("id");
  </code></pre>
  
  <p>but it does not work.</p>
  
  <p>Any pointers?</p>
  
  <p><strong>Updated:</strong></p>
  
  <p>It is actually a syntax error, my silly! Thank @SuperUser for that!</p>