在detach（）之后使用缓存的jQuery DOM

Question

我正在创建一个模板，并想用jQuery添加DOM过滤器。当我使用fadeIn / fadeOut时，一切正常。然后，我为我的5个div创建:nth-child，并希望使用detach（），因为当删除HTML div时，它可以计算子级并将其放在正确的位置。

我尝试创建DOM缓存，并在分离后-将其附加

-现在已删除cacheDom，但需要获取所有像var cacheDom = "$('#pick-filter-editor-wrapper').children('div#editors-box-item')";这样的孩子

这是我的完整代码：

$(document).ready(function() {
    $('.pick-filter-editor span a').click(function() {
      // fetch the class of the clicked item
      var ourClass = $(this).attr('class');
      // reset the active class on all the buttons
      $('.pick-filter-editor span').removeClass('pick-filter--active');
      // update the active state on our clicked button
      $(this).parent().addClass('pick-filter--active');

      var cacheDom = "";
      if(ourClass == 'all') {
        // show all items
        $('#pick-filter-editor-wrapper').children('div#editors-box-item').append(cacheDom);
      }
      else {
        // hide all elements that don't share ourClass
        $('#pick-filter-editor-wrapper').children('div:not(.' + ourClass + ')').detach();
        // show all elements that do share ourClass
        $('#pick-filter-editor-wrapper').children('div:not(.' + ourClass + ')').append(cacheDom);
      }
      return false;
    });
});

您可以检查实时模板here。该部分是“编辑精选”。