jQuery清空错误的div?

时间:2014-07-26 05:47:12

标签: javascript jquery html css html5

我一直在使用HTML5的data- *属性处理过滤器插件,但是jQuery(或其他东西)一直在清空错误的div。

基本上我有两个不同类的div。 '名为.gallery源'是包含所有内容的div类(并且'显示'属性设置为' none'值,因此它不会显示在文档中);虽然' .gallery'第一方面是空的,但后来给出了' .gallery-source'的内容。

一旦用户选择了要在下拉列表中过滤的选项(无序的项目列表,其中包含的数据 - *值与某些内容相匹配,这些内容符合> .gallery-source' data- *值),' .gallery' 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>

但是在其中一个过滤器下拉列表中选择了一个选项后,&#39; .gallery-source&#39;是空的:(

我在这里缺少什么?我想我疯了!

无论如何,我们非常感谢任何帮助。

2 个答案:

答案 0 :(得分:2)

.append将整个节点从.gallery-source移至.gallery。你想这样做:

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

你可以read about .clone() here

Here's a jsFiddle demo.

答案 1 :(得分:0)

empty()的API doc也说:

  

...如果我们内部有任意数量的嵌套元素,它们也会被移除。

因此,$('.works-content .gallery').empty()可能会删除超出您想要的内容。

编辑:修正拼写错误。