I created jQuery sorter plugin like below to filter by classes. But now I am not sure how to only display class="apple"
by default. Right now when I reload the page both APPLE and TREE is visible.
<ul>
<li class="apple">APPLE</li>
<li class="tree">TREE</li>
<li class="apple tree">ALL</li>
</ul>
<div>
<div class="apple">APPLE</div>
<div class="tree">TREE</div>
<div class="apple">APPLE</div>
<div class="tree">TREE</div>
<div class="apple">APPLE</div>
<div class="tree">TREE</div>
</div>
<script src="/js/jquery.min.js"></script>
<script type="text/javascript">
$("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
}
});
</script>
for(i in visibleClasses)
both becausei
is an implicit global variable and because you shouldn't usefor(x in y)
to iterate arrays (because it also iterates properties). You should do it like this:for (var i = 0; i < visibleClasses.length; i++)
and you should usevar
on your local variables so they aren't implicit globals.