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

Question

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

假设我有一个列表:

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

但它并没有改变这一点，请帮助我如何让它发挥作用

Answer 1

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

如$(this)是正在处理的元素(即 $(".filter-list") )，您正在更新类 children 的子元素。没有这样的元素。

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

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