jQuery each function

We have a list of elements inside the class "li-elements" we want to make a series of modifications:

We select each element and we go showing its text in the place of the web that we want, in this case we show it by console.
Of each selected element we choose the pairs and we change the color of the letter to red.

<html>
  <body>
    <ul class="li-elements">
      <li>Text 1</li>
      <li>Text 2</li>
      <li>Text 3</li>
      <li>Text 4</li>
    </ul>
    <!--Script jQuery-->
    <script>
       $(document).ready(function(){
         $('.li-elements li').each(function(index){
           console.log('Element '+index+' is '+$(this).text());
           if(index%2 == 0){
             $(this).css('color', 'red');
           }
         });
       });
    </script>
    <!--JQuery Library-->
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
  </body>
</html>

xxxxxxxxxx
 
<html>
  <body>
    <ul class="li-elements">
      <li>Text 1</li>
      <li>Text 2</li>
      <li>Text 3</li>
      <li>Text 4</li>
    </ul>
    <!--Script jQuery-->
    <script>
       $(document).ready(function(){
         $('.li-elements li').each(function(index){
           console.log('Element '+index+' is '+$(this).text());
           if(index%2 == 0){
             $(this).css('color', 'red');
           }
         });
       });
    </script>
    <!--JQuery Library-->
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
  </body>
</html>                                