从DOM删除并重新添加回来时复选框真的还是假的 [英] Remove from DOM and add back again when check box true or false

问题描述

我试图删除该DOM元素只需要时再相应的复选框过滤器是true或false被插回。目前，我有显示无或块，但我想完全消除要素的原因是因为我对第一个孩子给它在顶部更多的填充特定样式。所以现在，当我更换过滤器和一个新的项目第一次显示它当前没有应用的填充，我所需要的。

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

在code在上面的小提琴...

 函数StringContainsAllItems（stringVal，物品）{
如果（items.length == 0 || items.length == NULL）{
    返回false;
}对于（VAR I = 0; I＆LT; items.length;我++）{
    的console.log（项目：+项目[I]）;
    如果（stringVal.indexOf（项目[I]）== -1）
    {
         返回false;
    }
}返回true;
}
$（函数（）{
变量$复选框= $（输入[ID ^ ='类型 - ']）;
$（输入[类型=复选框]：选中'）ATTR（'检查'，虚假）;$ checkboxes.change（函数（）{
    如果（$（'输入[类型=复选框]：检查。）长度大于0）{        变种selectorArray = [];        $ checkboxes.filter（'：检查'）。每个（函数（）{
            selectorArray.push（$（本）.attr（'相对'））;
            的console.log（$（本）.attr（'相对'））;
        }）;        $（'[数据类型]'）。隐藏（）//隐藏所有行
         .filter（函数（）{
             返回StringContainsAllItems（$（本）。数据（类），selectorArray）;
        }）。显示（）; //减少设置为匹配并展示    }其他
        {
         $（'[数据类型]'）显示（）。
        }
}）;
}）;
 

解决方案

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

  $（'div.portfolio项：可见：第一'）addClass（第一项）;
 

您可以添加类：第一项的第一个可见的div（带班组合项）中，可以用于应用特殊样式用于第一分区。我发现的用处：可见选择在这个回答 <。 / p>

总之，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

这篇关于从DOM删除并重新添加回来时复选框真的还是假的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！