How to get number of rows as a JQuery variable

Question

I am very new to JQuery and cannot process how I can do this. I have a table in my database called user_thoughts. I am trying to implement the infinity scroll feature, which current, should alert("bottom") when the thoughts for a user surpass 10.

Each user can upload a thought and on their profile_page, only their thoughts are displayed. By default, I need 10 posts to display, then when a user scrolls to the bottom of the page, it will automatically load 10 more posts the user has written.

Here is my infinity_scroll script:

$(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
    });
});

I need an if statement surrounding the alert() which goes something like this - if the user has over 10 posts and the user has scrolled to the bottom, then display more data - Again for now, I am just using alert() for testing. If the user has only made 2 posts for example, and the user scrolls to the bottom, the alert() should not occur.

My thinking is that I need a var which gets the number of posts for a user and then user that far to specify if conditions such as

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

Is this the best way to go about this? If not, what approach should I adopt?

Edit:

How each single row (single post) is displayed:

  <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

You could get the length of your posts by counting the number of elements of a particular class appears in your page, e.g. Let's say you are using a wrapper class 'postRowWrap' for displaying each post, then

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

could give you the length of the current number of posts in view.

If you are using a <table>, then

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

could give you the length of posts in view.

Now you could do:

if(postLen > 10){alert()}

EDIT: Ah, a bit late from my end but to conclude this, in your case -

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

will give you the length of the number of messages in your page. Hope this helps. :)