jQuery清空错误的div？

Question

我一直在使用 HTML5 的 data-* 属性开发过滤器插件，但是 jQuery（或其他东西）总是清空错误的 div。

基本上我有两个不同类的 div。 '.gallery-source' 是具有所有内容的 div 的类（并且 'display' 属性设置为 'none' 值，因此它不会显示在文档中）；虽然“.gallery”一开始是空的，但随后给出了“.gallery-source”的内容。

一旦用户在下拉列表中选择了过滤选项（项目的无序列表，链接的 data-* 值与 '.gallery-source' data-* 值的某些内容相匹配），'.图库' div 被清空，然后'.gallery-source' 的每个匹配内容（与下拉菜单中设置的相同数据- * 值）被附加到'.gallery' 中。

代码如下所示：

    // 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));
      });
    });

文档最初看起来像这样（“.gallery”和“.gallery-source”都已填充）：

<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>

但在过滤器下拉列表中选择一个选项后，“.gallery-source”为空:(

我在这里缺少什么？我觉得我快疯了！

无论如何，任何帮助将不胜感激。

Answer 1

.append 将整个节点从.gallery-source 移动到.gallery。你想这样做：

$(this).clone().appendTo('.works-content .gallery');

你可以read about .clone() here。

Here's a jsFiddle demo.

Answer 2

empty() 的API doc 也表示：

...如果我们在里面有任意数量的嵌套元素，它们也会被移除。

因此，您的 $('.works-content .gallery').empty() 可能会删除比您想要的更多的内容。

编辑：修正错别字。