元素类开头的同位素过滤

Question

我正在使用同位素过滤器按类别为Wordpress贴子。通常，posts是过滤类别的子类，因此它们的类在类的名称中包含父类别的名称，但不等于这个名称。例如，过滤器是Facebook，Twitter，Youtube。它的类名是facebook页面或twitter信息图形。因此，这些帖子不会被过滤，除非父类别也被选中。我现在使用的代码如下( jQuery非冲突模式)：

var $jcontainer = $j('#portfolio-list');
$jcontainer.imagesLoaded( function() {
// initialize isotope
$jcontainer.isotope({
  filter: '*',
  itemSelector : '.post',
  layoutMode : 'masonry',
});
});

$j('#portfolio-filter a').click(function(){
    $j('#portfolio-filter .current').removeClass('current');
    $j(this).addClass('current');

    var selector = $j(this).attr('data-filter');
    $jcontainer.isotope({
        filter: selector,
     });
     return false;
}); 

我想知道如何通过课文的一部分来完成它。谢谢你的帮助。

解决方案

经过一番研究，我找到了解决办法。我意识到可以使用.match函数在筛选之前检查类，然后为每个匹配的元素分配一个类".match“。那就按这个类过滤！)这是密码。希望它能对某人有所帮助！

// cache container
var $jcontainer = $j('#portfolio-list');
$jcontainer.imagesLoaded( function() {
// initialize isotope
$jcontainer.isotope({
  filter: '*',
  itemSelector : '.post',
  layoutMode : 'masonry',
});
});

$j('#portfolio-filter a').click(function(){
    $j('#portfolio-filter .current').removeClass('current');
    $j('#portfolio-list .match').removeClass('match');
    $j(this).addClass('current');
    var selector = $j(this).attr('data-filter');
    $j('#portfolio-list article' ).each(function() {
       if ($j(this).attr('class').match(new RegExp(selector))) {
        $j(this).addClass('match');
    }
    }); 

    $jcontainer.isotope({
        filter: '.match',
     });
     return false;
}); 

Answer 1

溶液

经过一番研究，我找到了解决办法。我意识到可以使用.match函数在筛选之前检查类，然后为每个匹配的元素分配一个类".match“。那就按这个类过滤！)这是密码。希望它能对某人有所帮助！

​

// cache container
var $jcontainer = $j('#portfolio-list');
$jcontainer.imagesLoaded( function() {
// initialize isotope
$jcontainer.isotope({
  filter: '*',
  itemSelector : '.post',
  layoutMode : 'masonry',
});
});

$j('#portfolio-filter a').click(function(){
    $j('#portfolio-filter .current').removeClass('current');
    $j('#portfolio-list .match').removeClass('match');
    $j(this).addClass('current');
    var selector = $j(this).attr('data-filter');
    $j('#portfolio-list article' ).each(function() {
       if ($j(this).attr('class').match(new RegExp(selector))) {
        $j(this).addClass('match');
    }
    }); 

    $jcontainer.isotope({
        filter: '.match',
     });
     return false;
}); 

​