当复选框 true 或 false 时从 DOM 中删除并重新添加

Posted 2023-05-09

【中文标题】当复选框 true 或 false 时从 DOM 中删除并重新添加

【英文标题】：Remove from DOM and add back again when check box true or false

【发布时间】：2015-03-11 09:52:11

【问题描述】：

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

小提琴：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();   
        
);    
);

【问题讨论】：

如何获取“隐藏”元素并将它们附加到您的文档中？这将达到相同的结果，但你需要一些东西来恢复正确的顺序......

所以不要删除它们，只需将顺序向后和第四次更改？

是的 - 你有两个选择 - 隐藏，在 dom 中移动或从 dom 中删除 - 我总是根据元素大小和机会选择它们被重新插入...

【参考方案1】：

我不确定您是否想到了这一点，但通过应用以下选择器：

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

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

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

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

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

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

Fiddle

【讨论】：

我不知道是开始新帖子还是继续在这里，但基本上我需要在只显示一个项目时删除 div.portfolio-item 上的 ::after 。你认为这足够直截了当吗？

@Amesey 我不是 100% 在哪里使用它，但您可以检查可见计数： var visibleCount = $('div.portfolio-item:visible').length;然后你可以在 if 语句中使用它： if (visibleCount === 1) .. 。因此，您可能需要将删除和 addClass 'firstItem' 的那两行移动/复制到 $checkboxes.change 函数中的两个或三个位置。我不确定我是否解释清楚，所以请随时要求更多澄清:-)

谢谢，我刚刚创建了一个新帖子，同时将玩弄代码。 ***.com/questions/27924839/…

@Amesey 好的，我稍微更新了你的 Fiddle，我添加了 if/else 处理和一个具有背景颜色的新类 'one-item: turquoise 。小提琴jsfiddle.net/jyrkim/1ku221ds/1 关于 ::after 仍然有点不清楚，但现在有 if (visibleCount === 1) 选择器可用于您的特殊处理。祝你好运。

@Amesey，非常棒 :-) 如果您需要在 JSFiddle.net 上为 Fiddles 添加一些外部资源，例如样式表（Bootstrap 等）或 js 库，那么您可以很容易地添加它们。这是一个指南doc.jsfiddle.net/basic/introduction.html#external-resources 无论如何，它工作得很好。