Using jQuery to loop through elements and call user-defined function

Using jQuery to loop through elements and call user-defined function

So I'm trying to use .each to iterate through an unordered list where each element has a tag. If the element has "tag1", then the element is shown on screen, if not then the element is hidden.

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

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

  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.       }
  11.       $("#button").click(function(){
  12.             $("#list li").each(typeCheck(this, "tag1"));
  13.       });
  14. });
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.       }
  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...