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

Question

我正在尝试从 DOM 中删除元素，仅当相应的复选框过滤器为真或假时才需要重新插入。目前我有显示 none 或块，但我想完全删除元素的原因是因为我在第一个 child 上有一个特定的样式，在顶部给它更多的填充。所以目前当我更改过滤器并首先显示一个新项目时，它目前没有应用我需要的填充。

fiddle：http://jsfiddle.net/amesy/kwqpf5fv/6/

上面fiddle中的代码...

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

您可以添加 class: first-item 用于第一个可见的 div （与 class portfolio-item），可用于应用特殊第一个 div 的样式。我在这个 answer.

发现了 :visible 选择器的用处

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

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

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

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

Fiddle

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

Remove from DOM and add back again when check box true or false

jquery

dom

filter

append