且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

从DOM删除并重新添加回来时复选框真的还是假的

更新时间:2023-12-05 20:35:16

我不知道,如果你有这个想法,但通过应用以下选择:

  $('div.portfolio项:可见:第一')addClass(第一项);

您可以添加类:第一项的第一个可见的div(带班组合项)中,可以用于应用特殊样式用于第一分区。我发现的用处:可见选择在这个回答

总之,code两线已加入 $ checkboxes.change 功能:

  $('div.portfolio项目')removeClass移除(第一项); $('div.portfolio项:可见:第一')。addClass(第一项);

第一行只是清除了previous 第一项的选择。

小提琴

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

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