Hello. There is the following markup html

$('.cd-main-nav li').has('ul').addClass('test'); 
 .test { background-color:red; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="cd-main-nav"> <li><a href="#ankor" class="cd-subnav-trigger"><span>О нас</span></a> <ul> <li><a href="#ankor">Пункт №1</a> </li> <li><a href="#ankor">Пункт №2</a> </li> <li><a href="#ankor">Пункт №3</a> </li> <li><a href="#ankor">Пункт №4</a> </li> <li><a href="#ankor">Пункт №5</a> </li> </ul> </li> <li><a href="#ankor">Каталог</a> </li> <li><a href="#ankor">Портфолио</a> </li> <li><a href="#ankor">Контакты</a> </li> <li><a href="#ankor" class="cd-subnav-trigger"><span>Список</span></a> <ul> <li><a href="#ankor">Пункт №6</a> </li> <li><a href="#ankor">Пункт №7</a> </li> <li><a href="#ankor">Пункт №8</a> </li> <li><a href="#ankor">Пункт №9</a> </li> <li><a href="#ankor">Пункт №10</a> </li> </ul> </li> </ul>

Question: how to assign a new class (say .test as in the example) to the tag A, which is in the LI, which has a nested UL list, and precedes this UL.
Now the class is assigned to the entire item LI.
How many did not fight - does not go. Help to cope with this task.

  • I understood you correctly - you need items like Item 6 7 8, but not Catalog and Portfolio, right? - alexoander
  • No, it is necessary to assign the new class to the elements with the tag A "about us" and "list" - Evgeny Torshin

3 answers 3

To highlight all nested elements: search for elements inside the selected - method .find ()

 $('.cd-main-nav li').has('ul').find('a').addClass('test');

To highlight the parents of these nested items: search for items before selected ones

 $('.cd-main-nav li ul').prev().addClass('test'); 

     $('.cd-main-nav li').has('ul').find('a').addClass('test'); 
     .test { background-color:red; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="cd-main-nav"> <li><a href="#ankor" class="cd-subnav-trigger"><span>О нас</span></a> <ul> <li><a href="#ankor">Пункт №1</a> </li> <li><a href="#ankor">Пункт №2</a> </li> <li><a href="#ankor">Пункт №3</a> </li> <li><a href="#ankor">Пункт №4</a> </li> <li><a href="#ankor">Пункт №5</a> </li> </ul> </li> <li><a href="#ankor">Каталог</a> </li> <li><a href="#ankor">Портфолио</a> </li> <li><a href="#ankor">Контакты</a> </li> <li><a href="#ankor" class="cd-subnav-trigger"><span>Список</span></a> <ul> <li><a href="#ankor">Пункт №6</a> </li> <li><a href="#ankor">Пункт №7</a> </li> <li><a href="#ankor">Пункт №8</a> </li> <li><a href="#ankor">Пункт №9</a> </li> <li><a href="#ankor">Пункт №10</a> </li> </ul> </li> </ul>

    If you only need to select links in the internal list then -

      $('.cd-main-nav li ul a').addClass('test'); 
     .test { background-color:red; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="cd-main-nav"> <li><a href="#ankor" class="cd-subnav-trigger"><span>О нас</span></a> <ul> <li><a href="#ankor">Пункт №1</a> </li> <li><a href="#ankor">Пункт №2</a> </li> <li><a href="#ankor">Пункт №3</a> </li> <li><a href="#ankor">Пункт №4</a> </li> <li><a href="#ankor">Пункт №5</a> </li> </ul> </li> <li><a href="#ankor">Каталог</a> </li> <li><a href="#ankor">Портфолио</a> </li> <li><a href="#ankor">Контакты</a> </li> <li><a href="#ankor" class="cd-subnav-trigger"><span>Список</span></a> <ul> <li><a href="#ankor">Пункт №6</a> </li> <li><a href="#ankor">Пункт №7</a> </li> <li><a href="#ankor">Пункт №8</a> </li> <li><a href="#ankor">Пункт №9</a> </li> <li><a href="#ankor">Пункт №10</a> </li> </ul> </li> </ul>

    • "About us" and "List" probably should not be highlighted by a sample (I think). Something like $('.cd-main-nav li ul').find('a').addClass('test'); - alexoander
    • @alexoander can be without find then) - Moonvvell
    • A little on the contrary: the links “About us” and “List” should be highlighted in red. - Evgeny Torshin
    • @ Yevgeny Torshin, you have these elements now already have the class cd-subnav-trigger , you can add one more to them then. - Moonvvell
    • The cd-subnav-trigger should be added by the script. I made the test for an example. - Eugene Torshin
     $('.cd-main-nav li').has('ul') .children('a') .addClass('test');