Count filtered list items

[bcintegrity1]

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.

$(document).ready(function(){
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
$(‘li:gt(15)’).hide();

// displays translucent “cover” over list items
$(‘.cover’).show();}

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

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');}
});
});

http://integritycontractingofva.com/testpage.php

Simply, how do I count the filtered list?

[bcintegrity1]

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

http://integritycontractingofva.com/testpage3.php

[bcintegrity1]

Thanks in advance to anyone who can help >.<

[bcintegrity1]

?

[bcintegrity1]

Anyone?

[bcintegrity1]

Please help:/

[TheDoc]

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: http://codepen.io/ggilmore/pen/3c180251c08393e45012a5b8dbdde8e1

Just fork that pen to use as a starting point.

[bcintegrity1]

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:)
http://codepen.io/bcintegrity/pen/IAthx

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

[bcintegrity1]

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).

$(document).ready(function(){
var $nopestprofessional = $('#nopestprofessional')
var n = $('li.services').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); 
container.append(ListShuffle(container.find(s))
);
});
}; 
})();
$('.blank').hide();
$('#list').shuffle('li.services');
$("li.cover").appendTo("#list");
$("li.pest_control").appendTo("#list");
$('li.services:gt(14)').hide();
$('#button')
.bind('click',function(e) {
e.preventDefault();
$("li.pest_control").hide();})
.bind('click',function(e) {
$('.cover').addClass('showcover');})
.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) {
$('.flipper').addClass('top');})
.bind('click',function(e) {
$('.flipbutton').addClass('flipmenu');})
$('.flipbutton a').click(function(e){
e.preventDefault();
$('.flipper').toggleClass('top');});
;}
$('div.servicearea li').css("list-style", "none").css("line-height", "17px");
$('#filter a').click(function(e){
e.preventDefault();
$('#filter a').removeClass('active');
var filter = $(this).attr('id');
var $filteredItems = $("." + filter);
if ($filteredItems.length == 0) {$(this).addClass('active');
$nopestprofessional.removeClass('tab').addClass('tab1').show();
$('#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: http://integritycontractingofva.com/Pest-Control-in-Chesterfield%2C-VA—Midlothian%2C-VA—Chester%2C-VA—Moseley%2C-VA.php

Now I’ve gotta debug for IE.

[Author]

Posts