Question

我正在使用：

$('.filter__selector').change(function(){
var sel = $(this).val();
$('.filterItem').hide();
    //console.log(sel);
  if(sel != "all"){
    $('main').find('.projects__entry').hide();
    $('main').find('.' + sel).show();
  }
  else {
    $('main').find('.projects__entry').show();
  }
}
);

过滤具有select下拉列表的列表项，效果非常好。问题是我正在使用&:nth-child(3n+3)对每个第三个列表项进行不同的设置。

当hide()从屏幕中删除项目时，它不会从DOM中删除它们，而且我的CSS被搞砸了。如果select下拉列表已更改，我希望将其切换回来。

为了澄清我创造了一个小提琴：https://jsfiddle.net/9wtt4fge/2/ - 第三列中的项目应始终为蓝色边框，前两列中的项目必须为红色。

我已经找到了detach()方法和这个问题/答案How to toggle elements in and out of DOM using jQuery detach() method?，但我无法使其发挥作用。

任何帮助表示赞赏！

Answer 1

分离方法实际上是解决方案，但问题的第二部分是当你想要将它重新附加到dom时你必须知道在哪里，所以你必须跟踪你想要插入它的位置。你有两个选择，你可以依赖一个对象来保持你的元素有序，你必须按顺序分离并重新插入所有元素，或者你可以依赖一个你可以插入的注释元素在你的dom元素之前。

//create comments nodes to keep track of order
let projectEntryElements = $('main .projects__entry');
projectEntryElements.each(function(){
    let commentDom = $('<!--filter-track-comment-->').insertBefore(this);
    $(this).data('commentDom',commentDom);
});

$('.filter__selector').change(function(){
    let sel = $(this).val();
    $('.filterItem').hide(); //I don't know if you want to hide it or detach it so I let it as it was in your original code
    if(sel!="all"){
        projectEntryElements.detach();
        projectEntryElements.filter('.' + sel).each(function(){
            $(this).data('commentDom').after(this); //re-insert this after the comment node
        });
    }
    else {
        projectEntryElements.each(function(){
            $(this).data('commentDom').after(this); //re-insert this after the comment node
        });
    }

});

这个例子假设＆＃34; .projects__entry＆＃34;在此脚本的第一部分之前加载dom，你必须使它适应你的用例（如果你想复古compat，你也可以用var替换let关键字）

如何使用jQuery和detach（）

1 个答案: