javascript - 如何获取行数作为JQuery变量

Question

我是 JQuery 的新手，无法处理如何执行此操作。我的数据库中有一个名为 user_thoughts 的表。我正在尝试实现无限滚动功能，当前，当用户的 thoughts 超过 10 时，应该 alert("bottom")。

每个用户都可以上传一个想法，在他们的profile_page 上，只会显示他们的想法。默认情况下，我需要显示 10 个帖子，然后当用户滚动到页面底部时，它会自动加载用户写的另外 10 个帖子。

这是我的 infinity_scroll 脚本:

$(document).ready(function(){
    var load = 0;
    $(window).scroll(function(){
        if($(window).scrollTop() == $(document).height() - $(window).height()){
            load++;
            // start AJAX
            $.post("inc/ajax.php", {load:load},function (data){
                $(".userposts_panel").append(data); //  class
                alert ("bottom");
            });
        } // if closed
    });
});

我需要围绕 alert() 的 if 语句，它是这样的 - 如果用户有超过 10 个帖子并且用户已滚动到底部，则显示更多数据 - 现在，我只是使用 alert() 进行测试。例如，如果用户只发布了 2 个帖子，并且用户滚动到底部，则不应发生 alert()。

我的想法是，我需要一个 var 来获取用户的帖子数量，然后让用户指定

等条件

  if (posts >=10){ 
      alert("bottom");
  }

这是最好的方法吗？如果不是，我应该采用什么方法？

编辑:

如何显示每一行(单个帖子):

  <div class=userposts_panel>
<?php 
// PHP query here, leading to this echo ...
    echo "<div class='message_wrapper'>
                <div class='where_msg_displayed'>
                    <div class='more_options' style='float: right;'>
                        <li class='dropdown'>
                            <a 'href='#' class='dropdown-toggle' data-toggle='dropdown' role='button' aria-haspopup='true' aria-expanded='false'> More <span 
                                                                                                                                class='caret'></span></a>
                            <ul class='dropdown-menu'>
                                <li><a href>Flag Post 
                                <span id='options' class='glyphicon glyphicon glyphicon-flag' aria-hidden='true'></span> </a></li>"; 
                                if ($user == $username){
                                    echo "<li>"; ?>   <a href="/inc/del_post.php?id=<?php echo $thought_id;?>">Delete <?php
                                    echo "<span id='remove' class='glyphicon glyphicon-remove' aria-hidden='true'></span> </a></li>";
                                } echo"
                            </ul>
                        </li>
                    </div>";
                    if ($shared == "no"){
                        echo "<img class='img-size' src='images/anomolous.jpg' />";
                        } else {
                            echo "<img class='img-size' src='$profile_pic2'/>";
                        }
                     echo "<span style='margin-left: 10px;'>$message_content </span> <br/> <br/>";
                        if ($attachent !=""){
                            echo "<img src='user_data/attached_images/$attachent' style='width: 230px; height=230px;'/>";
                        } echo "
                </div>
            <div class='where_details_displayed'>
                <a href='profile_page/$thoughts_by'> <b> $name_of_user </b> </a> - $date_of_msg  
                <div class='mini_nav' style='float: right;'>
                     <a href='/inc/favourite_post.php?id=";?><?php echo $thought_id;?><?php echo "'>
                        <span class='glyphicon glyphicon-heart-empty' aria-hidden='true' style='padding-right: 5px;' onclick='changeIcon()'></span> 
                     </a> |
                    <a onclick='return toggle($thought_id);' style='padding-left: 5px;'>  Comments ($num_of_comments) </a> 
                </div>
                <div id='toggleComment$thought_id' class='new_comment' style='display:none;'>
                    <br/> $comment_posted_by said: $comment_body
                </div>
            </div>
        </div>";
     ?> 
    </div> // userposts_panel closed.

Answer 1

您可以通过计算页面中出现的特定类别的元素数量来获得帖子的长度，例如假设您正在使用包装类“postRowWrap”来显示每个帖子，然后

var postLen = $('.userposts_panel').find('.postRowWrap').length

可以为您提供当前可见帖子数的长度。

如果您使用的是 <table> , 然后

var postLen = $(".userposts_panel").find('tr').length

可以为您提供可见帖子的长度。

现在你可以:

if(postLen > 10){alert()}

编辑:啊，离我结束有点晚了，但就你而言，要结束这个 -

postLen = $(".userposts_panel").find('.message_wrapper').length //which is, in the wrapper class find number of .message_wrapper which signifies number of messages you have as DOM in your HTML

会给你页面中消息数量的长度。希望这可以帮助。:)