Remove from DOM and add back again when check box

问题:

I'm trying to remove elements from the DOM only need to be inserted back in again when the corresponding checkbox filter is either true or false. currently i have display none or block, but the reason I want to remove the elements altogether is because I have a specific style on the first child giving it more padding at the top. So currently when I change the filter and a new item is displayed first it currently does not have the padding applied which I need.

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

The code in the fiddle above...

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();   
        }
});    
});

回答1:

I'm not sure if you had this in mind, but by applying the following selector:

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

You can add the class: first-item for the first visible div (with class portfolio-item), that can be used to apply special styles for the first div. I discovered the usefulness of :visible selector at this answer.

Altogether, two lines of code have been added into $checkboxes.change function:

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

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

The first line just clears the previous first-item selection.

Fiddle