How do I correctly write jquery script

Question

I have been attempting to change the text that appears for various links within an html list.

What I want to do is this: So in this fiddle, using jQuery - I want to go to #athletic-group-dropdown, in the first ul change the ‘a’ text that is within the second li from "News" to "Overview"

I have tried various scripts and this gets me the closest but:

jQuery( “#athletic-group-dropdown ul li:nth-child(2)").addClass( "overview-switch" );
jQuery(".overview-switch a:contains(‘News’)”).html(“Overview”);

jQuery("#athletic-group-dropdown ul li:nth-child(2) ").addClass("overview-switch");
jQuery(".overview-switch-lst a:contains('News')").html("Overview");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="athletic-group-dropdown">
  <ul class="athletic-menu">
    <li>Tea</li>
    <li><a href="#">News</a></li>
    <li>Milk</li>
  </ul>

  <ul class="athletic-menu">
    <li><a href="#">News</a></li>
    <li>Coffee</li>
    <li>Peaches</li>
  </ul>

  <ul class="athletic-menu">
    <li><a href="#">News</a></li>
    <li>Apple</li>
    <li>Pear</li>
    <li>Grape</li>
  </ul>
</div>

Answer 1

You are doing a really big workaround. You don't need to add a class and later do a class selection.

The code is pretty straight-forward:

$("#athletic-group-dropdown ul:first-child a").text("Overview");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="athletic-group-dropdown">        
    <ul class="athletic-menu">
      <li>Tea</li>
       <li><a href="#">News</a></li>
      <li>Milk</li>
    </ul>  

    <ul class="athletic-menu">
      <li><a href="#">News</a></li>
      <li>Coffee</li>
      <li>Peaches</li>
    </ul> 

    <ul class="athletic-menu">
      <li><a href="#">News</a></li>
      <li>Apple</li>
      <li>Pear</li>
      <li>Grape</li>
    </ul> 
</div>