Question

I am probably missing something very simple, but here is the situation:

I have a row of checkboxes and a grid of list-items. I want the checkboxes to be toggling the visibility of the list items depending on what is checked (just standard filtering).

I have determined that I have to use the jQuery .detach() & .appendTo() functions, as this will keep all of my :nth-child attributes in tact when list-items are disappearing/reappearing.

Here is my 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>

And then I have a ton of LI’s with various tag names in the class fields —

<ul>
  <li class="print">
    // stuff
  </li>
  .
  .
  .
</ul>

And now for my jQuery (which is working for the first time you click a filter checkbox, but then it doesn’t do anything after that…)

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

Any help would be super appreciated. Thank you so much.

Answer 1

If I understood correctly, then you are trying to show/hide li‘s based on selection. Let me kow if I this is not what you want,

DEMO

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

    }
});