jQuery复选框使用.detach（）和#x2B；进行筛选。附件（

我可能遗漏了一些非常简单的东西，但情况如下：

我有一行复选框和一个列表项网格。我希望复选框根据选中的内容（仅标准筛选）切换列表项的可见性

我已经决定必须使用jQuery.detach（）和.appendTo（）函数，因为当列表项消失/重新出现时，这将使我的第n个子属性保持不变

这是我的HTML：

<div id="filter">
  <input type="checkbox" id="print" rel="print">Print</label>
  <input type="checkbox" id="web" rel="web">Web</label>
  <input type="checkbox" id="identity" rel="identity">Identity</label>
</div>

---

任何帮助都将不胜感激。非常感谢。

如果我理解正确，那么您正试图根据选择显示/隐藏

li

。让我知道如果我不是你想要的

---

我不确定这会是什么样子，但是我可能会使用CSS来隐藏东西，而不是

分离
。（
visibility:hidden；
或
display:none；
）@teak——我会使用CSS，除非在元素上简单地执行“display:none”，否则元素仍在DOM中，这意味着第n个子选择器仍在计算隐藏的div，弄乱了布局！哦，我以为你想保留第n个孩子。那就忽略这一评论吧。也许做一个JSFIDLE，这样我们就可以看到你有什么了。当复选框被取消选中时，有没有一种简单的方法来删除li？这个解决方案太接近了！我感谢你的帮助@briankulp尝试更新的演示，让我知道它是否是您想要的，当您取消选中一个框时，它应该隐藏相应的li元素。我不能对这件事耿耿于怀@briankulp您要隐藏还是分离？隐藏是完全不同的，如果隐藏，那么我们不应该使用分离。让我知道，两者都有！X-）我只需要分离元素，以便剩余的可见列表项具有正确的布局，其中包含我在其中的第n个子选择器。但是，取消选中框时，相应的元素不应可见。
<ul>
  <li class="print">
    // stuff
  </li>
  .
  .
  .
</ul>

$('#filter').delegate('input:checkbox', 'change', function() {  
   var $lis = $('#grid-wrap > li').detach();        

   //For each one checked
   $('input:checked').each(function() {
     $lis.filter('.' + $(this).attr('rel')).appendTo('#grid-wrap');
    });  
}); 

var $lis;

$('#filter').delegate('input:checkbox', 'change', function() {

    if (!$lis) $lis = $('#grid-wrap > li').detach();
    $('#grid-wrap').empty();

    if ($('input:checked').length == 0) {
        $lis.appendTo('#grid-wrap');
        $lis = null;
    } else {
        $('input:checkbox').each(function(i, chk) {
            if (chk.checked) {
                $lis.filter('.' + $(chk).attr('rel')).appendTo('#grid-wrap');
            }
        });

    }
});