按类筛选div-jquery

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

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

---

有人在任何地方见过类似的东西吗？

很难理解你在问什么。但这能给你一个起点吗

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

---

“流沙”看起来可以满足您的需求：从文档中可以看出，“在最基本的层面上，流沙将一个项目集合替换为另一个项目集合”

我认为您只需要添加一个元素来显示过滤结果，如下所示：

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

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

如果你需要更多细节，请告诉我

我最终使用了：

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

}))

}))

}))

}))

然后：

     <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.massy.js布局，div淡出的区域，现在有一个空白点。我需要弄清楚如何为每个onclick重新加载砖石，以便将剩余的项目重新排列到新的布局中

对此有何想法？

---

谢谢你的帮助

我也想这么做，但不知道如何克服空白问题。我知道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;
});

---

我想你想要的是：

HTML:

我希望它能帮助

$("#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>  

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

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

$("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
  }
});