根据过滤器将单行扩展为多行

时间:2017-06-21 06:42:13

标签: javascript jquery

我正在寻找一个示例,或者根据可用过滤器的数量显示过滤器

我们假设我有一个清单:

<dl class="filter-list clearfix filter-list-row-2">
    <dt>Type:</dt>
    <dd class="active">All</dd>
    <dd><a href="smart-devices-min0-max0-attr287/">BP Monitor</a></dd>
    <dd><a href="smart-devices-min0-max0-attr420/">Electric Kettle</a></dd>
    <dd><a href="smart-devices-min0-max0-attr373/">Fitness Tracker</a></dd>
    <dd><a href="smart-devices-min0-max0-attr311/">Gamepad</a></dd>
    <dd><a href="smart-devices-min0-max0-attr325/">Multi Color LED Bulb</a></dd>
    <dd><a href="smart-devices-min0-max0-attr367/">Smart Home Sensor</a></dd>
    <dd><a href="smart-devices-min0-max0-attr387/">Smart Socket</a></dd>
    <dd><a href="smart-devices-min0-max0-attr347/">TV Box</a></dd>
    <dd><a href="smart-devices-min0-max0-attr281/">Water Tester</a></dd>
    <dd><a href="smart-devices-min0-max0-attr299/">Weight Scale</a></dd>
    <dd><a href="smart-devices-min0-max0-attr336/">Wireless Mouse</a></dd>
</dl>

我想要做的是根据过滤器的数量更改高度,我有这个代码

$(".filter-list").each(function(index, element) {
    var childnum=$(this).find("dd").length;
    var row=Math.ceil(childnum/6);
    if(row>1){
        $(this).parent().find(".more").show();
        $(this).find(".children").addClass("filter-list-row"+row);  
    }
});

此代码应更改此

<dl class="filter-list clearfix filter-list-row-2">

<dl class="filter-list clearfix filter-list-row-3">

但它没有改变这一点请帮助我如何使它工作

1 个答案:

答案 0 :(得分:1)

$(this).find(".children")

由于$(this)是正在处理的元素(即$(".filter-list")),您正在使用类children更新子级。没有这样的元素。

要更新当前元素(这是你想要的),只需使用

$(this).addClass("filter-list-row"+row);