filtre divs par classe - jquery

Question

Il existe plusieurs filtres de liste dans jquery (sables mouvants, filtres, etc.), mais je cherche à filtrer les div par classe.

Je veux la même fonctionnalité de ce qui précède - vous sélectionnez un élément de menu attaché à une classe et les autres éléments disparaissent.

Quelqu'un at-il vu quelque chose comme ça partout?

Answer 1

Je fini par utiliser:

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

});

puis:

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

Ce qui fonctionne très bien, sauf en raison de la mise en page de jquery.masonry.js, les zones où la div disparaît, il est maintenant un endroit vide. J'ai besoin de comprendre comment recharger la maçonnerie pour chaque onclick afin que les éléments restants soient mélangés dans une nouvelle mise en page.

réflexions à ce sujet? et merci pour l'aide!

Answer 2

Il est difficile de comprendre ce que vous demandez. Mais est-ce que cela vous donne une place pour commencer?

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

Answer 3

Quicksand semble que cela va faire ce que vous voulez: de la documentation - «Au niveau très basique, Quicksand remplace une collection d'objets avec un autre.

Je pense que vous avez juste besoin d'ajouter un élément pour afficher les résultats du filtrage, comme ceci:

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

Votre jQuery serait quelque chose comme:

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

Il y a peut-être un moyen de modifier les sables mouvants pour utiliser le même élément pour la source et l'affichage (en masquant/montrant les éléments, au lieu de les ajouter et les retirer du DOM), mais cela devrait vous permettre de fonctionner, je pense. Faites-moi savoir si vous avez besoin de plus de détails!

Answer 4

Je voulais faire cela aussi mais je n'arrivais pas à trouver comment surmonter le problème des espaces. Je sais que la dernière version de Mansory supporte le filtrage mais je l'ai trouvé un peu bogué lors du filtrage du DOM.

Vous pouvez simplement essayer de changer l'opacité du .box pour donner un effet de filtre.Voir ci-dessous:

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

Je pense que ce que vous voulez est le suivant:

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

J'espère que cela aide ...