jquery loops

[sarahA]

I don't know much about the jquery loops (each?) so wondered if someone could point me in the right direction for the following, which I think is possible...

I have say 10 divs on a page, all divs have a class of post. Then within the class list, they'll also have a number of other classes, some of which denote which category or categories that post is in eg. category-x, category-y and category-z.

I want to be able to say, loop through all posts on the page and hide posts in category-y and category-z but not if they're in category-x.

Eg.
post 1 is in x and y (so stays showing)
post 2 is in y and z (so hides)
post 3 is in x (so stays)
post 4 is in z (so hides)
post 5 is in x, y and z (so stays)
etc.

Thing is, I only know that a post should be in category-x to stay, not that it shouldn't be in y or z. So I need to sort of say 'if there isn't a class matching category-x, then hide'. To (possible) make it more complicated, there won't just be one category to match, there could be x1, x2 and x3, of which a post in any of those categories should stay showing.

Thoughts? Is it possible via jQuery?

TIA

[Matt]

 

Love giving you a challenge!

[sarahA]

  Think I've sussed it but need to test it and see if there's a better way.

[SLEE]

I used a script on my portfolio have dig in my site ill try and find the original script for you.

EDIT: it is called filterable you can grab it from my site by viewing the code as i can't find an original site. there are a few links if you search for it.

http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/

[sarahA]

Cheers Lee. Only issue with that is that it uses hasClass(), which I could have more than one class, so I'd have to loop through all classes for every post (eg. 10 posts on a page), which probably takes up more resources than necessary.

I've got (untested)

Code:

cats = cats.toString();  // cats is an array of class names
cats = cats.replace(',', '|');
var chk = new RegExp(cats, "gi");

$('#div.post').each(function(i,row){
var found = false;
var classList = $(this).attr('class').split(/\s+/);
$.each( classList, function(index, item){
    if (chk.test(item)) {
        found = true;
    }
});

if (!found) {
$(this).fadeOut();
}
});

[samhs]

all fine from a cursory glance, but you don't need to use attr("class") - use hasClass() instead:

Code:

var ismatch;
$("#div.post").each(function(){
  ismatch = false;
  for(var x=0;x<cat.length;x++) {
    if($(this).hasClass(cat[x])) ismatch=true;
  }
  if (!ismatch) $(this).fadeOut();
});

(warning: untested code)


That will hide anything that doesn't match at least one of the classes specified in the cats array. If the cats array contains many classes, and you're only testing for a match based on whether the classname contains the string "gi", then you'll have to do something more like you have.

HTH

[sarahA]

Thanks Sam   Just out of interest, how much sort of resource use / time could looping through the cat array produce for 10 posts? For example, someone may have 5 or 6 categories in the array, so that would mean looping through up to 60 times (can I break out of the for loop like you can in PHP once a match is found, to save loop through the rest when it's unnecessary?)

My code (in theory) just took the array and put it into a regex to avoid looping through the array multiple times (the 'gi' are the modifiers global and case insensitive, in case that wasn't obvious).

if there's not much difference in efficiency then your code looks a lot cleaner and easier to read! I'll try both out and see if there's much difference in speed

Thanks again, much appreciated

[samhs]

yeah, you're quite right in that it's less efficient to loop through the array multiple times, but I suspect if you're only talking a total of 10 posts, and 6 elements in the Array, you'll notice no degradation in performance. And yes, you can indeed break out using break;

Even after using them for years, I still find regular expressions hard to get my head around. Every time I use one I feel like I'm learning from complete noob status The principle is fine, but decoding is another story altogether!

[sarahA]

Cheers Sam. Yeah I'm still trying to get my head round regex. I'm getting there slowly with PHP, but there are a few differences in JS and that's the first one I tried in the above script. However converted it to your script as I think it's cleaner

Thanks again. Appreciated