CSS class not applying in the node

Question

I am trying to add and remove class using the following script to #menuElem tag:

<script type="text/javascript">
$('#menuElem li ul').each(function (){
  $(this).addClass("fallback browse-experience-drop-down-width");
});
$('#menuElem li a').each(function (){
  $(this).addClass("skew");
});
 $('#menuElem li ul li a').each(function (){
  $(this).removeClass("skew");
});
</script>

Ideally this should work, but not working, Can someone help?

See below the HTML that we are adding the class, you can find menuElem inside the HTML

<!-- Header zone -->
<!-- header -->
<div class="tenantHeade fs-headerfooter-widget">
<!---->
<header>
<div id="container" class="container">
<div class="logocont"><a href="/" class="logo">website</a></div>
<!-- Mobile nav btn -->
<a class="nav-toggle" href="javascript:void(0);"><span class="ada-compliant visible-xs"></span></a>
<!-- Mobile user options (for anon and preferred visitors) -->

<a href="javascript:void(0);" class="member-toggle">
<span class="ada-compliant visible-xs"></span>

</a>

<!-- Main nav -->
<nav class="main-nav inactive">
 <ul id="menuElem">
  <li>
   <a href="https://www.website.com/FareFinder/DeepLinkSearch/?SearchFrom=browseexperiences&amp;TravlePeriod=12&amp;AdultCount=2"><span class="antiskew">Browse Experiences</span></a>
   <ul>
    <li>
     <a href="https://www.website.com/FareFinder/DeepLinkSearch/?SearchFrom=website&amp;amp;TravlePeriod=12&amp;amp;AdultCount=2">website</a>
    </li>
    <li>
     <a href="https://www.website.com/local">Local</a>
    </li>
    <li>
     <a href="https://www.website.com/https://www.website.com/FareFinder/DeepLinkSearch/?SearchFromType=theme&amp;SearchFrom=voluntours&amp;TravlePeriod=12&amp;Keyword=voluntours&amp;AdultCount=2">Voluntours</a>
    </li>
    <li>
     <a href="https://www.website.com/https://www.website.com/FareFinder/DeepLinkSearch/?SearchFromType=theme&amp;SearchFrom=welcomewebsite&amp;TravlePeriod=12&amp;Keyword=welcome+website&amp;AdultCount=2">Welcome website</a>
    </li>
   </ul>
  </li>
  <li>
   <a href="https://www.website.com/Marketing/becomemember"><span class="antiskew">Become a Member</span></a>
  </li>
  <li>
   <a href="https://www.website.com/Marketing/becomemember"><span class="antiskew">Daily Deals</span></a>
  </li>
 </ul>

Answer 1

$(document).ready(function() {
    $('#menuElem>li>ul').addClass("fallback browse-experience-drop-down-width");
    $('#menuElem>li>a').addClass("skew");
    $('#menuElem>li>ul>li>a').removeClass("skew");
});

Answer 2

$(document).ready(function () {

    $('#menuElem li ul').each(function () {
        $(this).addClass("fallback browse-experience-drop-down-width");
    });
    $('#menuElem li a').each(function () {
        $(this).addClass("skew");
    });
    $('#menuElem li ul li a').each(function () {
        $(this).removeClass("skew");
    });
});