Question

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>

Answer 1

Hide all non-apples with:

$("div div:not(.apple)").hide();

Rather than iterate the array, construct a selector that get’s all the elements at once:

var selector = "div div." + visibleClasses.join(",div div.");

selector will contain "div div.apple,div div.tree" which will select elements that match either of the comma separated selectors. You can then do:

$(selector).fadeIn(500);

Edit: So, with this change, your code would look like this:

<script type="text/javascript">  
    $(function () {
        $("div div:not(.apple)").hide();
        $("ul li").click(function() {
            var visibleClasses = $(this).attr("class").split(" ");
            $("div div").hide();
            var selector = "div div." + visibleClasses.join(",div div.");
            $(selector).fadeIn(500);
        });
    });
</script>

---

By, the way, if you choose to iterate the Array use a regular for loop or Array.forEach(). Do not use for..in to iterate an Array. The for..in statement is for enumerating, not iterating.