获取类名末尾的数值，并使用jQuery将其存储为变量

Question

考虑以下由WordPress函数输出的菜单：

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

现在考虑下面的帖子列表：

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

我的目标是使用一个jQuery函数来提取菜单的类名的数字结尾(即。cat-item 6中的6 )，并使用该值指向相应的帖子。为了详细说明，我将使用该6作为变量，并找到以6结尾的filter类。

这是我到目前为止所知道的：

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

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

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

        return false;

  });

对于js fiend来说应该很容易:-)

Answer 1

您可以使用RegEx从您的类id中获取编号(下面的代码未经过测试)-

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

Answer 2

如果您确定类字符串中只有一个数字，则可以使用以下命令：

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

如果您不确定，最好使用：

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

Answer 3

我通常使用.substring(9)来获取数字，但我想还有一种比这更好的方法

另外，为了便于引用，我会将其放入data属性值或id中，如下所示：

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

然后在jquery中：

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

或者其他类似的东西

注意:如果你的元素有一个唯一的"id“，不要把它放在一个类中。将其放入id或data-attribute中(因此，在您的示例中，catitem和filternum将位于data-catitem或data-filternum中，或者位于它们的元素id中。