Cannot get the last child of a class jquery

Question

So I am implementing loading more data when users scroll pass a div in my index page.

My div to contain data:

<div class="container-fluid" id="post-data">

</div>

<div class="ajax-load text-center" style="display:none">
    <p><img src="http://demo.itsolutionstuff.com/plugin/loader.gif">Loading More post</p>
</div>

My jQuery script:

<script type="text/javascript">
    $(document).ready(function () {
        var first_id = <?php require_once 'php/functions.php'; echo get_smallest_post_id();?>;
        loadMoreData(first_id);
        $(document).on('scroll', function () {
            if ($(this).scrollTop() >= $('#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...');
            });
    }
</script>

My article.php just return some rows:

<?php
..... (Fetch data in database)
while ($post = $select->fetch_assoc()) {
?>
<div class="row" id="<?php echo $post_id ?>">
    <div class="col-sm-4"><a href="#" class=""><img src="<?php echo $first_image_src ?>" class="img-responsive"></a>
    </div>
    <div class="col-sm-8">
        <h3 class="title"><?php echo $title ?></h3>
        <p class="text-muted"><span class="glyphicon glyphicon-lock"></span> Available Exclusively for Premium
            Members</p>
        <p><?php echo $description ?></p>
        <p class="text-muted">Presented by <a href="#"><?php echo $username ?></a></p>
        <button onclick="window.location.href='https://infs3202-c25wl.uqcloud.net/travnow/content.php?id=<?php echo $post_id ?>'" id="btnReadmore" type="submit" class="btn btn-primary">Read More</button>
    </div>
</div>
<hr>
<? } ?>

My page currently can load the first two articles, but then there is a problem when users scroll pass the #post-data div. It keeps showing "undefined" when i alert var last_id

if ($(this).scrollTop() >= $('#post-data').position().top) {
   var last_id = $('#post-data').children('.row').last().id;
   alert(last_id);
}

Inspect result:

I also tried:

var last_id = $(".row:last").attr("id");

but it does not work.

Any pointers?

Updated:

It is actually a syntax error, my silly! Thank @SuperUser for that!

Answer 1

You have some syntax error in your jquery script , it should be

var last_id = $('#post-data').children('.row').last().attr('id');
alert(last_id);

or

var last_id = $('#post-data .row:last-child').attr('id');
alert(last_id);

Answer 2

try:

var last_id = $('#post-data:nth-last-child(1)').attr('id');

Answer 3

How about using the CSS-selector for last child?

var last_id = $('#post-data:last-child').prop('id');

I prefer the use of prop, haven't had any trouble with that so far, where attr has given me several problems in the past.

You might want to read up on this: .prop() vs .attr()