The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Count filtered list items

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #45901

    Everything works fine, except lines 12 & 13. I’m trying to show the same default message as I do in line 3 (if no list items are available), except AFTER the list items are filtered. Currently, lines 12 & 13 count the original list, but not the filtered list.

    var n = $(‘.item’).length;

    // shows default if no list items present
    if (n < 1) {$('#nopestprofessional').removeClass('tab').addClass('tab1');} else { // shows first 15 list items only

    // displays translucent “cover” over list items

    $(‘#filter a’).click(function(e){

    var filter = $(this).attr(‘id’);

    // shows relevant list items
    $(‘#list li’).show();

    // hides non-relevant list items
    $(‘#list li:not(.’ + filter + ‘)’).hide();

    // my attempt to show default, if there are no list items in the **filtered** list. The
    // bottom anchor “OTHER SERVICES” on the left menu returns no items in the link
    // below.)
    var l = $(‘#list li’).length;

    // If I change the 1 to 20, the default shows, which tells me the original unfiltered
    // list items are being counted.
    if (l < 1) {$('#nopestprofessional').removeClass('tab').addClass('tab1');}

    Simply, how do I count the filtered list?


    An example of the default (first if statement) on page load can be seen here. There are no list items.


    Thanks in advance to anyone who can help >.<






    Please help:/


    Sorry, having a *really* hard time looking at the code on that site – so many nested tables! Can you create a reduced test case on Code pen? That’ll be much easier to debug. Preferably, don’t use tables in your demo – keep it as simple as possible.

    To help get you started I formatted all of your JS here:

    Just fork that pen to use as a starting point.


    Thank you @TheDoc for the response! I’m not used to Code pen…the bottom display goes blank if I click an anchor. Is the bottom part for display purposes only?

    Anyways, here’s the simplified html. Hopefully it’s easier to read:)

    Since I was able to get results on page load for the unfiltered list using if else, I’m going to toy around with if else statements again for the filtered results. I tried it before, but had a dumb mistake in the middle of the script, which ‘voided’ the if else at the end. Geez!!!


    I finally got everything working…and then some! Thankfully, jquery is “easy” to read, so I’ll let the code speak for itself (what the functions are).

    var $nopestprofessional = $('#nopestprofessional')
    var n = $('').length;
    if (n < 1) {$nopestprofessional.removeClass('tab').addClass('tab1');
    $('#nopestprofessional p').css('marginBottom', '20px');
    $('div.servicearea li').css("list-style", "none").css("line-height", "17px");}
    else {
    jQuery.fn.shuffle = (function(){ 
    function ListShuffle(arr) { 
    var i = arr.length, r, tempI, tempR; 
    if ( i === 0 ) {return arr;} 
    while ( i-- ) { 
    r = Math.floor(Math.random() * (i + 1));
    tempI = arr[i];
    tempR = arr[r];
    arr[i] = tempR;
    arr[r] = tempI;} 
    return arr;}
    return function(s) {return this.each(function(){var container = jQuery(this); 
    .bind('click',function(e) {
    .bind('click',function(e) {
    .bind('click',function(e) {
    $('.coverm h2').animate({"color": "#ff7700", "textShadow": "2px 2px 3px #111111"},{duration: 2400})
    .animate({"color": "#ffffff", "textShadow": "0px 0px 10px #ffffff"},{queue: true, duration: 1000})
    .animate({"color": "#ff7700", "textShadow": "2px 2px 3px #111111"},{queue: true, duration: 1500});})
    .bind('click',function(e) {
    .bind('click',function(e) {
    $('.flipbutton a').click(function(e){
    $('div.servicearea li').css("list-style", "none").css("line-height", "17px");
    $('#filter a').click(function(e){
    $('#filter a').removeClass('active');
    var filter = $(this).attr('id');
    var $filteredItems = $("." + filter);
    if ($filteredItems.length == 0) {$(this).addClass('active');
    $('#nopestprofessional h2').replaceWith('<h2>There are currently no listings for this service in your area.</h2>');
    $('#nopestprofessional p').replaceWith('

    Find pest professionals from a neighboring city/county who may offer this service in your area.

    '); $('#nopestprofessional p').css('marginBottom', '20px'); } else { $(this).addClass('active'); $('#list li').show(); $('#list li:not(.' + filter + ')').hide(); $nopestprofessional.removeClass('tab1').addClass('tab');} }); });

    The live site:—Midlothian%2C-VA—Chester%2C-VA—Moseley%2C-VA.php

    Now I’ve gotta debug for IE.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.