Получить числовое значение в конце имени класса и сохранить как переменную, используя jQuery - PullRequest
Новая
       13

Получить числовое значение в конце имени класса и сохранить как переменную, используя jQuery

1 голос
/ 17 июля 2011

Рассмотрим вывод этого меню с помощью функции 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 для извлечения числового окончанияимени класса меню (т. е. 6 в cat-item 6) и используйте это значение для таргетинга на соответствующий пост.Чтобы уточнить, я бы использовал это 6 как переменную и нашел бы класс filter, который заканчивается на 6.

Вот что я имею до сих пор: 

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

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

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

        return false;

  });

Следуетбыть легким для изверга: -)

Ответы [ 3 ]

4 голосов
/ 17 июля 2011

Вы можете использовать RegEx, чтобы получить номер из идентификатора вашего класса (код ниже не проверен) - 

$('#header-cats li').click(function(){  
    var num_id = $(this).attr('class').match(/\d+/); // ... matching "cat-item-?" etc...
    $(".filter-"+num_id).fadeIn(500); 
    return false;
});
3 голосов
/ 17 июля 2011

Если вы уверены, что в строке класса есть только 1 число, вы можете использовать это: 

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

если вы не уверены, лучше используйте: 

var num_id = $(this).attr('class').match(/cat-item-(\d+)/)[1]
0 голосов
/ 17 июля 2011

Я обычно использую .substring (9), чтобы получить число, но я думаю, что есть лучший способ, чем этот

также я бы поместил это в значение атрибута данных или идентификатор для более легкой ссылки, например: 

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

или что-то на этот счет

примечание если ваш элемент будет иметь уникальный идентификатор, не помещайте его в класс. поместите его в идентификатор или атрибут данных (поэтому в вашем случае catitem и filternum будут либо в data-catitem, либо data-filternum ИЛИ в своих идентификаторах элементов.

...