Apply class to parent UL if child LI contains specific class

Question

I'm currently working on a side menu that will list all pages in the relative section. I pretty much have this sorted apart from 1 small thing. We have 2 levels of dropdowns meaning there are an awful lot of links.

The LI that is active will have the class of .current_page_item . I'm trying to work out a way of saying: If the UL has a child LI containing .current_page_item class then apply .side_open class to the UL.

 $(document).ready(function(){ }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li>Demo 1 <ul> <li class="current_page_item">Demo 11</li> </ul> </li> <li>Demo 2 <ul> <li>Demo 21</li> </ul> </li> <li>Demo 3 <ul> <li>Demo 31</li> </ul> </li> <li>Demo 4 <ul> <li>Demo 41</li> </ul> </li> </ul> 

If anyone has any ideas on how this can be done your help would be greatly appreciated!

Answer 1

You can use .parentElement property to access li 's ul .

 const linksArray = [...document.querySelectorAll('li')]; linksArray.forEach(link => { link.onclick = function() { linksArray.forEach(link => link.classList.remove('current_page_item')) this.classList.add('current_page_item') this.parentElement.classList.add('side_open') } }) 

 .current_page_item { background-color: aliceblue; } .side_open:before { content: 'I have side open class'; } 

 <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul> 

Answer 2

You can do it using jquery. It's very simple, using each loop, traverse and check for class in each LI and add .side_open class in it's parent if that li has .current_page_item class.

 $(document).ready(function(){ $('ul.main_ul>li>ul.sub_ul>li').each(function(){ if($(this).hasClass('current_page_item')){ $(this).parent().addClass('side_open'); } }); }); 

 .side_open { background-color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="main_ul"> <li class="main_li">Demo 1 <ul class="sub_ul"> <li class="current_page_item">Demo 11</li> <li class="current_page_item">Demo 12</li> </ul> </li> <li class="main_li">Demo 2 <ul class="sub_ul"> <li>Demo 21</li> <li>Demo 22</li> </ul> </li> <li class="main_li">Demo 3 <ul class="sub_ul"> <li>Demo 31</li> <li>Demo 32</li> </ul> </li> <li class="main_li">Demo 4 <ul class="sub_ul"> <li>Demo 41</li> <li>Demo 42</li> </ul> </li> </ul> 

Answer 3

From what I understand, you want to style the direct parent if the li is selected. (Comment me if I'm wrong)

So, the following should be what you want to achieve:
(Done with some Javascript)

 $(document).ready(function() { $('ul>li>ul>li').each(function() { if ($(this).hasClass('current_page_item')) { $(this).parent().addClass('side_open'); } }); }); 

 .side_open { background: #ddd; } .current_page_item { background: #bbb; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li>Demo 1 <ul> <li class="current_page_item">Demo 11</li> </ul> </li> <li>Demo 2 <ul> <li>Demo 21</li> </ul> </li> <li>Demo 3 <ul> <li>Demo 31</li> </ul> </li> <li>Demo 4 <ul> <li>Demo 41</li> </ul> </li> </ul>