如何使用jQuery和detach()

时间:2017-04-12 10:50:41

标签: jquery dom filter detach

我正在使用:

$('.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?,但我无法使其发挥作用。

任何帮助表示赞赏!

1 个答案:

答案 0 :(得分: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关键字)