2

Consider this menu output by a WordPress function:

<ul id="header-cats"> 

    <li class="cat-item cat-item-6"><a href="url" title="View all posts filed under Category I">Category I</a> 
</li> 
    <li class="cat-item cat-item-7"><a href="url" title="View all posts filed under Category II">Category II</a> 
</li> 
    <li class="cat-item cat-item-8"><a href="url" title="View all posts filed under Category III">Category III</a> 
</li> 

</ul>

Now consider this list of posts:

<ul id="posts-preview" class="clearfix"> 

    <li class="filter-reset filter-hide filter-6 ">             
        <a class="post-thumb" id="post-112" href="url" >Link</a>        
    </li>

    <li class="filter-reset filter-hide filter-6 filter-8 ">            
        <a class="post-thumb" id="post-102" href="url" >Link</a>        
    </li>

    <li class="filter-reset filter-hide filter-7 ">             
        <a class="post-thumb" id="post-88" href="url" >Link</a>         
    </li>

    <li class="filter-reset filter-hide filter-6 ">             
        <a class="post-thumb" id="post-6" href="url" >Link</a>      
    </li>
</ul>

My aim is to use a jQuery function to extract the numerical ending of the menu's class name (ie. the 6 in cat-item 6) and use that value to target the corresponding post. To elaborate I would use that 6 as a variable and find the filter class that ends in 6.

Here is what I have so far:

  $('#header-cats li').click(function(){  

    var num_id = $(this).attr('class') // ... matching "cat-item-?" etc...

        $(".filter-"+num_id).fadeIn(500); 

        return false;

  });

Should be easy for a js fiend :-)

Niels
  • 353
  • 1
  • 6
  • 15

3 Answers3

6

You could use a RegEx to get the number from your class id (code below not tested) -

$('#header-cats li').click(function(){  
    var num_id = $(this).attr('class').match(/\d+/); // ... matching "cat-item-?" etc...
    $(".filter-"+num_id).fadeIn(500); 
    return false;
});
ipr101
  • 24,096
  • 8
  • 59
  • 61
4

If you are sure there is only 1 number in the class string you could use this:

var num_id = $(this).attr('class').match(/\d+/)[0]

if you are not sure, better use:

var num_id = $(this).attr('class').match(/cat-item-(\d+)/)[1]
edave
  • 168
  • 10
0

I usually use .substring(9) to get the number, but i guess there's a better way than that

also i would either put that in a data-attribute value or an id for easier reference like so:

<li class="cat-item" data-catitem-num=8><a href="url" title="View all posts filed under Category III">Category III</a>

then in jquery:

$(".cat-item").click(function(){
  var filterNum = $(this).attr("data-catitem-num");
  $(".filter-"+filterNum).fadeIn(500);
  return false;
})

or something to that effect

note if your element will have a unique "id" don't put it in a class. put it in an id or data-attribute(so in your case, catitem and filternum would either be in data-catitem or data-filternum OR in their element ids.

corroded
  • 21,406
  • 19
  • 83
  • 132
  • I don't want to mess with the WP function though for the sake of anyone altering my theme. – Niels Jul 17 '11 at 09:26
  • i see, well in that case that should still work, albeit a bit harder. you;ll have to get the classname manually like you did before and then do your substring(9) on the class name. get it? – corroded Jul 17 '11 at 09:28
  • basically, substring will return you anything after the 9th character, which in "cat-item-8" is the second -(giving you 8). if you had double didgit numbers(or more) it will return that number. AND that's not a jquery func by the way, that's good ol' js(which is compatible with jquery) – corroded Jul 17 '11 at 09:29
  • Sounds viable @corroded :-) Not familiar with that method. Can you give me an example? – Niels Jul 17 '11 at 09:32