jquery - Use function with arguments within .each()

Question

I want to use single function for different lists changin the arguments.

Statement like this $( ".animals li" ).each(color); works. However, as I try to pass parameters, even empty, does not work $( ".animals li" ).each(color());

In my case I want to get function, which changes the color of the odd elements (color different). Any way?

<ul class="animals">
            <li>cat</li>
            <li>hamster</li>
            <li>dog</li>
            <li>racoon</li>
            <li>rat</li>
</ul>

<ul class="plant">
            <li>pine</li>
            <li>oak</li>
            <li>fir</li>
            <li>birch</li>
            <li>palm </li>
</ul>

$( document ).ready(function(){
      $( ".animals li" ).each(color(ind, el, "green"));
    $( ".plant li" ).each(color(ind, el, "red"));
    
    
  function color( index, element, text_color ) { 
        if( index % 2 != 0 ) { 
          $( this ).css( "color", text_color ); 
        }
      }
});

https://jsfiddle.net/Nata_Hamster/sp4k2wat/

question from:https://stackoverflow.com/questions/65909678/use-function-with-arguments-within-each

Answer 1

You cannot pass the parameters like that. You need to pass it like:

$( ".animals li" ).each((ind, el) => color(ind, el, "green"));

That will do it. However, you need to fix your color function to not use 'this':

function color( index, element, text_color ) { 
        if( index % 2 != 0 ) { 
          $( element ).css( "color", text_color ); 
        }
      }