фильтровать дивы по классам - jquery

Question

В jquery есть несколько фильтров списков (зыбучие пески, проекты фильтров и т. Д.), Но я хочу отфильтровать div по классу.

Мне нужна та же функциональность, что и выше - вы выбираете пункт меню, прикрепленный к классу, а другие элементы исчезают.

Кто-нибудь видел что-нибудь подобное где-нибудь?

Answer 1

Я закончил, используя:

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

});

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

});

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

}); * * 1 010

$("#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 исчезает, теперь есть пустое место. Мне нужно выяснить, как перезагрузить кладку для каждого клика, чтобы оставшиеся элементы были перетасованы в новый макет.

мысли по этому поводу? и спасибо за помощь!

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

Надеюсь, это поможет ...

Answer 3

Я тоже хотел это сделать, но не мог понять, как преодолеть проблему пробелов. Я знаю, что последняя версия 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;
});

Answer 4

Quicksand выглядит так, как будто он будет делать то, что вы хотите: из документации - «На самом базовом уровне Quicksand заменяет одну коллекцию элементов другой».

Я думаю, вам просто нужно добавить элемент для отображения результатов фильтрации, например так:

<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), но я думаю, что это должно заставить вас работать. .

Дайте мне знать, если вам нужно больше деталей!

Answer 5

Трудно понять, что вы спрашиваете. Но дает ли это вам место для начала?

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