如何使用 jQuery/JavaScript 计算 PHP while 循环的最后一次迭代？

Question

In PHP I have a page that checks if there are more than 0 rows and if not then the user gets a message saying echo 'NO MATCHES'; , then checks if the user $_POST ed any filters to show all data that fits in said filtered parameters and if not shows all iterations. Here's my pseudo code:

PHP.php

$rowcount = mysqli_num_rows($result); //Count iterations

if($rowcount > 0){

    if(isset($_POST["filter1"]) && isset($_POST["filter2"]) && isset($_POST["filter3"])) {

        //If there are filters selected
        while($row = mysqli_fetch_array($result)) {

            include('Listing.php');

        }

    } else {

        //If no filters have been selected
        while($row = mysqli_fetch_array($result)) {

            include('Listing.php');

        }

    }

} else {

    echo '<div class="NoMatch">NO MATCHES</div>';

}

Then in my jQuery I have an AJAX call that when an image with the #Loader is inView (a third party function) it grabs my filters as data, directs to the PHP page (above) and appends the data inside the container. Here's that pseudo code:

jQuery.js

$('#Loader').on('inview', function(event, isInView) {

        if (isInView) {

            // Filters
            var filter1 = get_filter('filter1');
            var filter2 = get_filter('filter2');
            var filter3 = get_filter('filter3');

            $.ajax({

                url: 'PHP.php',
                type: 'POST',
                data: {

                    filter1: filter1,
                    filter2: filter3,
                    filter3: filter3
                },

                success: 

                    function(data) { 

                        if(data != '') {
                            $('#StoneContainer').append(data);
                            $('#pageno').val(nextPage);
                        } else {
                            $('#StoneContainer').html(data); 
                            $('#Loader').hide();   // Hide infinite scroll
                        }

                    }

            });

        }

    });

In the if statement of my jQuery.AJAX i'm trying to hide the image ( #Loader ) when data is empty but it's never empty because of my PHP's echo 'NO MATCHES'; . How do I calculate the last index of the PHP's while loop with jQuery to hide the image when there are no more PHP iterations?

ATTEMPTS :

if(data.lastIndexOf('class="Iteration"') == 0) {
    $('#Container').append(data);
    $('#pageno').val(nextPage);
} else {
    $('#Container').html(data); 
    $('#Loader').hide();   // Hide infinite scroll
}

Didn't work because it would find the last class of that page but not the entire array and if(data.indexOf('class="Iteration"') > 0) { didn't work because it only hides when the PHP $rowcount < 0 but not when the array is finished.

$('#Container').append(data);
$('#pageno').val(nextPage);

$('.Iteration').each(function(element) {
    if (element + 1 === count) {
        $('#Loader').hide();   // Hide infinite scroll
    } 
});

I can't figure out why didn't work either.

Answer 1

Sorry - I can't comment yet, but I think this is a reasonable answer -

Why not simply change your if() condition, to exclude whatever the 'no match' condition text looks like.

Your comments seem to indicate that the 'no match' text looks like this:

<div class="NoMatch">NO MATCHES</div>

Let's say that the string 'NoMatch' is guaranteed to only show up when there are no matches, and will never show up when there were 1 or more matches.

Then you could use this:

if(data !== '' && !data.includes('NoMatch')) {
  $('#StoneContainer').append(data);
  $('#pageno').val(nextPage);
} else {
  $('#StoneContainer').html(data); 
  $('#Loader').hide();   // Hide infinite scroll
}