Question

因此，当用户滚动传递索引页中的div时，我正在实现加载更多数据。

我的div包含数据：

<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>

我的jQuery脚本：

<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>

我的article.php只返回一些行：

<?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>
<? } ?>

我的页面目前可以加载前两篇文章，但是当用户滚动传递＃post-data div时会出现问题。当我提醒 var last_id

时，它会一直显示“undefined”

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

检查结果：

我也尝试过：

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

但它不起作用。

任何指针？

更新

这实际上是一个语法错误，我很傻！感谢@SuperUser！

Answer 1

你的jquery脚本中有一些语法错误，它应该是

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

或

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

Answer 2

尝试：

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

Answer 3

如何为最后一个孩子使用CSS选择器？

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

我更喜欢使用道具，到目前为止还没有遇到任何麻烦，attr过去给我带来了一些问题。

您可能希望了解这一点：.prop() vs .attr()

无法获取类jquery的最后一个子节点

3 个答案: