CODEWITHSUNDEEP
jquery
DCI STUDIOS LTD
DCI STUDIOS LTD

Reputation: 37

adding class to <a href> if nested ul

I have the following menu

<ul>
    <li><a href="index.html">Main1</a></li>
    <li>
        <a href="#">Main2</a>
        <ul class="sub-menu">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </li>
</ul>

and im trying, though JS to add a class to the <a href> if there is a parent menu, so that my menu becomes like this

<ul>
    <li><a href="index.html">Main1</a></li>
    <li>
        <a href="#" class="hassubmenu">Main2</a>
        <ul class="sub-menu">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </li>
</ul>

$("li").has( "ul" ).addClass('contains-sub-menu');

only add the class to the <li>, how to add it to <a> .

Upvotes: 1

Views: 57

Answers (1)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

@DCI STUDIOS LTD you are too close to right solution what you tried. You just missed to check first link and then add class to that link

Do like below:-

$('li').has('ul').find('a:first').addClass('hassubmenu');

Working snippet:-

$('li').has('ul').find('a:first').addClass('hassubmenu');
.hassubmenu{ /*to show you that code worked*/
  color:green;
  font-size:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li> <a href="index.html">Main1</a> </li>
  <li> <a href="#">Main2</a>
    <ul class="sub-menu">
       <li> <a href="#">Link</a> </li>
       <li> <a href="#">Link</a> </li>
      <li> <a href="#">Link</a> </li>
      <li> <a href="#">Link</a> </li>
    </ul>
  </li>
  <li><a href="index.html">Main3</a></li>
  <li> <a href="#">Main4</a>
    <ul class="sub-menu">
       <li> <a href="#">Link</a> </li>
       <li> <a href="#">Link</a> </li>
      <li> <a href="#">Link</a> </li>
      <li> <a href="#">Link</a> </li>
    </ul>
  </li>

</ul>

A better solution is what i previously provided (after modification what suggested by @A. Wolff):-

$('li ul').parent().children('a').addClass('hassubmenu');

Working snippet:-

$('li ul').parent().children('a').addClass('hassubmenu');
.hassubmenu{ /*to show you that code worked*/
  color:green;
  font-size:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li> <a href="index.html">Main1</a> </li>
  <li> <a href="#">Main2</a>
    <ul class="sub-menu">
       <li> <a href="#">Link</a> </li>
       <li> <a href="#">Link</a> </li>
      <li> <a href="#">Link</a> </li>
      <li> <a href="#">Link</a> </li>
    </ul>
  </li>
  <li><a href="index.html">Main3</a></li>
  <li> <a href="#">Main4</a>
    <ul class="sub-menu">
       <li> <a href="#">Link</a> </li>
       <li> <a href="#">Link</a> </li>
      <li> <a href="#">Link</a> </li>
      <li> <a href="#">Link</a> </li>
    </ul>
  </li>

</ul>

Upvotes: 2

Related Questions