Home › Forums › JavaScript › Count filtered list items
- This topic is empty.
-
AuthorPosts
-
June 26, 2013 at 4:27 pm #45901
bcintegrity1
ParticipantEverything 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?
June 26, 2013 at 4:39 pm #140619bcintegrity1
ParticipantAn 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 #141194bcintegrity1
ParticipantThanks in advance to anyone who can help >.<
July 1, 2013 at 8:18 pm #141216bcintegrity1
Participant?
July 1, 2013 at 8:30 pm #141220bcintegrity1
ParticipantAnyone?
July 5, 2013 at 10:25 pm #141221bcintegrity1
ParticipantPlease help:/
July 5, 2013 at 11:22 pm #141219TheDoc
MemberSorry, 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.
July 6, 2013 at 12:14 pm #141741bcintegrity1
ParticipantThank 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/IAthxSince 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 #146193bcintegrity1
ParticipantI 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.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.