我正在使用:
$('.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?,但我无法使其发挥作用。
任何帮助表示赞赏!
答案 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关键字)