Question

我正在尝试从DOM中删除元素，只需要在相应的复选框过滤器为true或false时再次插入。目前我显示没有或阻止，但我想完全删除元素的原因是因为我在第一个孩子上有一个特定的样式，在顶部给它更多的填充。因此，当我更改过滤器并首先显示一个新项目时，它当前没有应用我需要的填充。

小提琴：http://jsfiddle.net/amesy/kwqpf5fv/6/

上面小提琴中的代码......

function StringContainsAllItems(stringVal, items){
if(items.length == 0 || items.length == null){
    return false;   
}

for(var i = 0; i < items.length; i++){
    console.log("Item: " + items[i]);
    if(stringVal.indexOf(items[i]) == -1)
    {
         return false;   
    }
}

return true;
}


$(function() { 
var $checkboxes = $("input[id^='type-']");
$('input[type=checkbox]:checked').attr('checked', false);

$checkboxes.change(function() {
    if( $('input[type=checkbox]:checked').length > 0){

        var selectorArray = [];

        $checkboxes.filter(':checked').each(function() {
            selectorArray.push($(this).attr('rel'));
            console.log($(this).attr('rel'));             
        });

        $('[data-category]').hide() // hide all rows
         .filter(function() {
             return StringContainsAllItems($(this).data('category'), selectorArray);             
        }).show(); // reduce set to matched and show

    }else
        {
         $('[data-category]').show();   
        }
});    
});

Answer 1

我不确定你是否记得这个，但是应用以下选择器：

$('div.portfolio-item:visible:first').addClass("first-item");

您可以为第一个可见div（使用类first-item）添加类：portfolio-item，可用于为第一个div应用特殊样式。我发现了:visible选择器在answer处的有用性。

总共在$checkboxes.change函数中添加了两行代码：

 $('div.portfolio-item').removeClass("first-item");

 $('div.portfolio-item:visible:first').addClass("first-item");

第一行只清除之前的first-item选项。

Fiddle

从DOM中删除并在复选框为true或false时再次添加

1 个答案: