过滤:nth-​​child忽略css显示为none的位置

时间:2013-09-18 11:46:34

标签: javascript jquery

我有一个脚本,在3列中采用一些浮动div,从1行的3列获得最大高度,并使所有3个div具有相同的高度。然后它为每一行重复它,脚本工作正常但是我在JQuery中构建了一个自定义过滤系统,根据价格范围或品牌等的选择隐藏或显示某些div。

当我使用过滤器时,它将删除顶行的第2列,并使第二行的第4列向上移动到第一行。保留代码中的第2列,以便重新运行高度/列检查脚本将无效。

所以我要做的就是我在使用我的filter(':nth-child(3n-2)')添加一个if语句,它将跳过从第n个子项选择中隐藏的所有div。

我明白我可以在我的filter();中使用一个函数,但它对我来说是一个新功能,所以我不确定如何正确使用它。

这是我的工作代码:

var $sections = $('.section-link');
$sections.filter(':nth-child(3n-2)').each(function () {
    var $this = $(this),
        $els = $this.nextAll(':lt(2)').addBack();
    var sectionheight = new Array();
    $els.each(function () {
        var value = $(this).find('.section-title').height();
        sectionheight.push(value);
    });
    var newsectionheight = Math.max.apply(Math, sectionheight);
    $els.find('.section-title').height(newsectionheight);
})

JSfiddle example

到目前为止我试图使用这样的东西:

$sections.filter(function() {
   return $(this).css('display') !== 'none';
}, ':nth-child(3n-2)')

1 个答案:

答案 0 :(得分:0)

通过在调用:nth-​​child

之前返回css属性,设法使其工作
function makeheight(){
var $sections = $('.section-link');

    $sections.filter(function() {
   return $(this).css('display') == 'block';
}, ':nth-child(3n-2)').each(function () {

        var $this = $(this),
            $els = $this.nextAll(':lt(2)').addBack();
        var sectionheight = new Array();
        $els.each(function () {
            var value = $(this).find('.section-title').height();
            sectionheight.push(value);
        });
        var newsectionheight = Math.max.apply(Math, sectionheight);
        $els.find('.section-title').height(newsectionheight);
    });


}