My goal is to add the class .div-initial to the div with the class .nav-content-wrap if it contains one or fewer UL elements. However, I am encountering an issue where the class .div-initial is being added to all other divs instead of just the closest one.
Here's a snippet of my HTML:
<ul id="nav">
<li><a href="./">Government</a></li>
<li><a href="./">Community</a>
<div class="nav-content-wrap">
<ul>
<li><span>Dropdown header here</span></li>
<li><a href="./">Dropdown link</a></li>
<li><a href="./">Dropdown link</a></li>
<li><a href="./">Dropdown link</a></li>
<li><a href="./">Dropdown link</a></li>
<li><a href="./">Dropdown link</a></li>
</ul>
</div>
</li>
<li><a href="./">Visitors</a></li>
<li><a href="./">Business</a></li>
<li><a href="./">How Do I...?</a></li>
</ul><!-- /#nav -->
This is my jQuery code:
if($('.nav-content-wrap ul').length <= 1){
$(this).addClass('div-initial');
}
Additionally, I am trying to wrap all ULs inside the div tag with
<div class="col-md-6"></div><div class="col-md-12"></div>I attempted this code but it did not work as expected, as it selected all ULs in the document:
if($('#nav ul').length >= 1){
$(this).find('ul').wrap('<div class="col-md-6"></div>');
}