我一直在使用HTML5的data- *属性处理过滤器插件，但是jQuery（或其他东西）一直在清空错误的div。
基本上我有两个不同类的div。 ＆＃39;名为.gallery源＆＃39;是包含所有内容的div类（并且＆＃39;显示＆＃39;属性设置为＆＃39; none＆＃39;值，因此它不会显示在文档中）;虽然＆＃39; .gallery＆＃39;第一方面是空的，但后来给出了＆＃39; .gallery-source＆＃39;的内容。
一旦用户选择了要在下拉列表中过滤的选项（无序的项目列表，其中包含的数据 - *值与某些内容相匹配，这些内容符合＆gt; .gallery-source＆＃39; data- *值），＆＃39; .gallery＆＃39; div被清空，然后每个匹配的内容（相同的数据 - *下拉列表中设置的值）＆＃39; .gallery-source＆＃39;被附加在＆＃39; .gallery＆＃39;。
之内代码看起来像这样：
// Append everything from .gallery-source to .gallery in order to show ALL work (filters may be applied later)
var gallerySource = $('.works-content .gallery-source').html();
$('.works-content .gallery').html(gallerySource);
// Attribute filtering for all work inside .gallery
$('ul#artist-dropdown li a, ul#technique-dropdown li a, ul#material-dropdown li a').on('click', function() {
// Get selected filter on form
var artistFilterValue = $('.works-content .filter-dropdowns .dropdown-wrapper a.button.artist > span').attr('data-filter-artist');
var techniqueFilterValue = $('.works-content .filter-dropdowns .dropdown-wrapper a.button.technique > span').attr('data-filter-technique');
var materialFilterValue = $('.works-content .filter-dropdowns .dropdown-wrapper a.button.material > span').attr('data-filter-material');
// Empty .gallery in order to fill it later with filtered work
$('.works-content .gallery').empty();
// Get filtered elements and append them to .gallery
$('.single-work[data-artist~="' + artistFilterValue + '"][data-technique~="' + techniqueFilterValue + '"][data-material~="' + materialFilterValue + '"]').each(function(){
$('.works-content .gallery').append($(this));
});
});
该文档最初看起来像这样（两个＆＃39; .gallery＆＃39;和＆＃39; .gallery-source＆＃39;已填充）：
<div class="row works-content">
<div class="row">
<div class="small-12 medium-12 large-12 columns filter-dropdowns">
<div class="dropdown-wrapper">
Filtrar por:
<span class="dropdown-label">Artista</span>
<a href="#" data-dropdown="artist-dropdown" class="small button radius dropdown artist"><span data-filter-artist="all">Seleccionar</span> <i class="fa fa-chevron-down"></i></a><br>
<ul id="artist-dropdown" data-dropdown-content="" class="f-dropdown">
<li><a href="#"><span data-filter-artist="all">Todos</span></a></li>
<li><a href="#"><span data-filter-artist="name-one">Name One</span></a></li>
<li><a href="#"><span data-filter-artist="name-two">Name Two</span></a></li>
</ul>
</div>
<div class="dropdown-wrapper">
Técnica:
<a href="#" data-dropdown="technique-dropdown" class="small button radius dropdown technique"><span data-filter-technique="all">Seleccionar</span> <i class="fa fa-chevron-down"></i></a><br>
<ul id="technique-dropdown" data-dropdown-content="" class="f-dropdown">
<li><a href="#"><span data-filter-technique="all">Todos</span></a></li>
<li><a href="#"><span data-filter-technique="acrylic">Acrílico</span></a></li>
<li><a href="#"><span data-filter-technique="mixed-paper">Mixta sobre papel</span></a></li>
<li><a href="#"><span data-filter-technique="mixed-fabric">Mixta sobre tela</span></a></li>
<li><a href="#"><span data-filter-technique="oil">Óleo</span></a></li>
</ul>
</div>
<div class="dropdown-wrapper">
Soporte:
<a href="#" data-dropdown="material-dropdown" class="small button radius dropdown material"><span data-filter-material="all">Seleccionar</span> <i class="fa fa-chevron-down"></i></a><br>
<ul id="material-dropdown" data-dropdown-content="" class="f-dropdown">
<li><a href="#"><span data-filter-material="all">Todos</span></a></li>
<li><a href="#"><span data-filter-material="fabric">Tela</span></a></li>
<li><a href="#"><span data-filter-material="paper">Papel</span></a></li>
</ul>
</div>
<ul class="button-group filter-buttons">
<li class="active show-all"><a href="#" class="button">Todas</a></li>
<li class="show-available"><a href="#" class="button">Disponibles</a></li>
<li class="show-sold"><a href="#" class="button">Vendidas</a></li>
</ul>
</div>
</div>
<div class="row gallery-source">
<div data-artist="name-one all" data-technique="oil all" data-material="paper all" class="small-12 medium-4 large-4 columns single-work available-work">
<a class="work-lightbox" href="img/work/name-one/3.jpg">
<div class="work-image-wrapper">
<div class="work-image" style="background-image: url(img/work/name-one/3.jpg);"></div>
</div>
<img class="avatar" src="img/artists/name-one.png">
</a>
<a href="" class="artist-name">
<h2>Name One <i class="fa fa-plus-circle"></i></h2>
</a>
<ul class="details">
<li class="title">"Título de obra"</li>
<li>Código SUA1005</li>
<li>Tamaño: 140 x 180 cm.</li>
<li>Soporte: Papel</li>
<li>Técnica: Óleo</li>
</ul>
</div>
<div data-artist="name-two all" data-technique="acrylic all" data-material="fabric all" class="small-12 medium-4 large-4 columns end single-work sold-work">
<a class="work-lightbox" href="img/work/name-two/5.jpg">
<img class="sold" src="img/work/sold.png">
<div class="work-image-wrapper">
<div class="work-image" style="background-image: url(img/work/name-two/5.jpg);"></div>
</div>
<img class="avatar" src="img/artists/name-two.png">
</a>
<a href="" class="artist-name">
<h2>Name Two <i class="fa fa-plus-circle"></i></h2>
</a>
<ul class="details">
<li class="title">"Título de obra"</li>
<li>Código SUA1005</li>
<li>Tamaño: 140 x 180 cm.</li>
<li>Soporte: Tela</li>
<li>Técnica: Acrílico</li>
</ul>
</div>
</div>
<div class="row gallery">
<div data-artist="name-one all" data-technique="oil all" data-material="paper all" class="small-12 medium-4 large-4 columns single-work available-work">
<a class="work-lightbox" href="img/work/name-one/3.jpg">
<div class="work-image-wrapper">
<div class="work-image" style="background-image: url(img/work/name-one/3.jpg);"></div>
</div>
<img class="avatar" src="img/artists/name-one.png">
</a>
<a href="" class="artist-name">
<h2>Name One <i class="fa fa-plus-circle"></i></h2>
</a>
<ul class="details">
<li class="title">"Título de Obra"</li>
<li>Código ejemplo</li>
<li>Tamaño: 140 x 180 cm.</li>
<li>Soporte: Papel</li>
<li>Técnica: Óleo</li>
</ul>
</div>
<div data-artist="name-two all" data-technique="acrylic all" data-material="fabric all" class="small-12 medium-4 large-4 columns end single-work sold-work">
<a class="work-lightbox" href="img/work/name-two/5.jpg">
<img class="sold" src="img/work/sold.png">
<div class="work-image-wrapper">
<div class="work-image" style="background-image: url(img/work/name-two/5.jpg);"></div>
</div>
<img class="avatar" src="img/artists/name-two.png">
</a>
<a href="" class="artist-name">
<h2>Name Two <i class="fa fa-plus-circle"></i></h2>
</a>
<ul class="details">
<li class="title">"Título de obra"</li>
<li>Código ejempl5</li>
<li>Tamaño: 140 x 180 cm.</li>
<li>Soporte: Tela</li>
<li>Técnica: Acrílico</li>
</ul>
</div>
</div>
</div>
但是在其中一个过滤器下拉列表中选择了一个选项后，＆＃39; .gallery-source＆＃39;是空的：（
我在这里缺少什么？我想我疯了！
无论如何，我们非常感谢任何帮助。
答案 0 :(得分：2)
.append将整个节点从.gallery-source移至.gallery。你想这样做：
$(this).clone().appendTo('.works-content .gallery');
答案 1 :(得分：0)
empty（）的API doc也说：
...如果我们内部有任意数量的嵌套元素，它们也会被移除。
因此，$('.works-content .gallery').empty()可能会删除超出您想要的内容。
编辑：修正拼写错误。