按类过滤 div - jquery答案

【问题标题】：filter divs by class - jquery按类过滤 div - jquery
【发布时间】：2010-05-10 14:24:00
【问题描述】：

jquery 中有几个列表过滤器（quicksand、filterprojects 等），但我希望按类过滤 div。

我想要与上述相同的功能 - 您选择一个附加到某个类的菜单项，其他项会淡出。

有人在哪里见过这样的事情吗？

【问题讨论】：

【解决方案1】：

我最终使用了：

    $("#box").click(function() {
$(".box").fadeIn();

});

$("#logo").click(function() {
 $(".box").fadeIn();
$(".box:not(.logo)").fadeOut();

});

$("#print").click(function() {
 $(".box").fadeIn();
$(".box:not(.print)").fadeOut();

});

$("#web").click(function() {
 $(".box").fadeIn();
$(".box:not(.web)").fadeOut();

});

然后：

     <li><a  id="box" href="#box">All</a></li>  
 <li><a id="logo" href="#logo">Logo</a></li>  
 <li><a id="print" href="#print">Print</a></li>  
 <li><a id="web" href="#web">Web</a></li>  
 <li><a href="#illustration">Illustration</a></li>

效果很好，除了由于 jquery.masonry.js 布局，div 淡出的区域，现在有一个空白点。我需要弄清楚如何为每个 onclick 重新加载砌体，以便将剩余的项目改组到新的布局中。

对此有什么想法？并感谢您的帮助！

【讨论】：

【解决方案2】：

我想你想要的是这样的：

HTML：

<ul>
  <li class="red">Red</li>
  <li class="green">Green</li>
  <li class="blue">Blue</li>
</ul>
<div>
  <div class="red">...</div>
  <div class="green">...</div>
  <div class="green">...</div>
  <div class="green">...</div>
  <div class="blue">...</div>
  <div class="blue">...</div>
</div>

jQuery:

$("ul li").click(function() {
  visibleClasses = $(this).attr("class").split(" ");
  $("div div").hide(); // or slideUp / fadeOut
  for(i in visibleClasses) {
    $("div div."+visibleClasses[i]).fadeIn(500); // or slideDown / show
  }
});

希望对你有帮助……

【讨论】：

【解决方案3】：

很难理解你在问什么。但这是否为您提供了一个开始的地方？

$("#myMenu ul li").mouseenter(function() {
  $(this).addClass("selected");
  $(this).siblings().addClass("other-selected");
});

【讨论】：

【解决方案4】：

流沙看起来会做你想做的事：从文档中 - '在最基本的层面上，流沙用另一个替换一个项目集合'。

我想你只需要添加一个元素来显示过滤的结果，就像这样：

<ul id="flavourFilter">
    <li class="vanilla">Vanilla</li>
    <li class="strawberry">Strawberry</li>
    <li class="asparagus">Asparagus</li>  
</ul>

<div id="source">
  <div id="box1" class="vanilla">
  </div>
  <div id="box2" class="vanilla">
  </div>
  <div id="box3" class="strawberry">
  </div>
  <div id="box4" class="strawberry">
  </div>
  <div id="box5" class="asparagus">
  </div>
  <div id="box6" class="asparagus">
  </div>
</div>

<div id="display"></div>

你的 jQuery 应该是这样的：

$(function(){
    //To load the unfiltered list into the display as the initial state:
    $('#display').quickSand($('#source li'));

    //To filter based on clicks in the menu:
    $('#flavourFilter li').click(function(){
        $('#display').quickSand($('#source li.' + this.className));
    });
});

可能有一种方法可以修改流沙以对源和显示使用相同的元素（通过隐藏/显示元素，而不是在 DOM 中添加和删除它们），但我认为这应该可以让您启动并运行.

如果您需要更多详细信息，请告诉我！

【讨论】：

【解决方案5】：

我也想这样做，但不知道如何克服空白问题。我知道最新版本的 Mansory 确实支持过滤，但我在过滤 DOM 时发现它有点错误。

您可能只想尝试更改 .box 的不透明度以提供滤镜效果。见下文：

// this filters all box divs related to web
$("#web").click(function() {
  $(".box").stop().animate({opacity : 1});
  $(".box:not(#web)").stop().animate({opacity : 0.2}); 
  return false;
});

// shows all box divs
$("#all").click(function() {
  $(".box").stop().animate({opacity : 1});
  return false;
});

【讨论】：