The problem is when I used .each, for each iteration I want it to call a user-defined function typeCheck().

Case 1

index.html

1. <a href="#" id="button">Button</a>
2. <ul id="list">
3.       <li class="tag1">Item 1</li>
4.       <li class="tag1">Item 2</li>
5.       <li class="tag2">Item 3</li>
6.       <li class="tag3">Item 4</li>
7.       <li class="tag1">Item 5</li>
8. </ul>

script.js

1. $(document).ready(function(){
2.       function typeCheck(currElem, tag){
3.             if ($(currElem).hasClass(tag)) {
4.                   if($(currElem).is(":hidden")) {
5.                         $(currElem).fadeIn();
6.                   }
7.             } else {
8.                   $(currElem).fadeOut();
9.             }
10.       }
12.       $("#button").click(function(){
13.             $("#list li").each(typeCheck(this, "tag1"));
14.       });
15. });

Demo of Case 1

Now when I try this, I get an error in the Chrome console: "Uncaught TypeError: Cannot call method 'call' of undefined". Also apparently a ninja bug has slipped into this because "Button" disappears when you click on it... weird.

Case 2
So checking to see if something was wrong with my logic, I replaced the code in typeCheck with a simple console.log() call.

1. $(document).ready(function(){
2.       function typeCheck(){
3.             console.log("test");
4.       }
5.     
6.       $("#button").click(function(){
7.             $("#list li").each(typeCheck());
8.       });
9. });

It prints out "test" once and then gets the same error. So it seems like it's calling the function once successfully though.

Case 3
So instead of using a user-defined function, I just have jQuery call the function directly like this:

1. $(document).ready(function(){
2.       $("#button").click(function(){
3.             $("#list li").each(function(){
4.                   if ($(this).hasClass("tag1")) {
5.                         if($(this).is(":hidden")) {
6.                               $(this).fadeIn();
7.                         }
8.                   } else {
9.                         $(this).fadeOut();
10.                   }
11.             });
12.       });
13. });

Demo of Case 3

Here the behavior works fine, and the function code is verbatim to the first two cases, so I think my general logic is right.

So why aren't the first two cases working as intended and what's up with the weird ninja bug in case 1? I know I can just use case 3 since it works, but I would like to keep my code more on the organized side. I'm calling this function quite a bit, and it's kind of annoying having to copy and paste a buncha code when a user-defined function would suffice...