Show the third hidden element of a list ul with jQuery

We have a list ul with 5 elements, within which the third and fifth elements are hidden by CSS. We will show the third element of the list ul with jQuery. First we select the third element of the list and then we show it with the show function.

<html>
  <body>
    <ul class="my-class">
      <li>List 1</li>
      <li>List 2</li>
      <li style="display:none;">List 3</li>
      <li>List 4</li>
      <li style="display:none;">List 5</li>
    </ul>
    <!--Script jQuery-->
    <script>
       $(document).ready(function(){
         $("ul.my-class li:nth-child(3)").show();
       });
    </script>
    <!--JQuery Library-->
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>  
  </body>
</html>