The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Count filtered list items

  • # June 26, 2013 at 4:27 pm

    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?

    # June 26, 2013 at 4:39 pm

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

    # July 1, 2013 at 5:35 pm

    Thanks in advance to anyone who can help >.<

    # July 1, 2013 at 8:18 pm


    # July 1, 2013 at 8:30 pm


    # July 5, 2013 at 10:25 pm

    Please help:/

    # July 5, 2013 at 11:22 pm

    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.

    # July 6, 2013 at 12:14 pm

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

    # August 8, 2013 at 8:01 pm

    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)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed