jQuery - add navigation active class on parent - javascript

I would like to use jQuery to add an active class to an <li> only if it contains a nested 'child element' which has a particular class.
Here is the rendered HTML code:
<li class="primary-nav__item primary-nav__item--sub js-header-sub-link">
<a class="primary-nav__link nav__link--sub js-header-sub-link-a" href="/collections/books">Books</a>
<div class="nav__sub" id="sub-3">
<div class="nav__sub-wrap">
<ul class="nav__sub__items o-list-bare">
<li class="nav__sub__item">
<a class="nav__sub__link" href="#">I'm a sub-link</a>
</li>
<li class="nav__sub__item nav__sub__item--sub js-header-sub-t-link nav__sub__item--active">
<a class="nav__sub__link" href="#">I'm a sub-link</a>
</li>
<li class="nav__sub__item">
<a class="nav__sub__link" href="#">I'm a sub-link</a>
</li>
</ul>
</div>
</div>
</li>
Here's what I'd like to happen:
The outermost <li> will get an additional class of primary-nav__item--active only if it contains a "child <li>" which has a class of nav__sub__item--active
Here are the affected lines of code:
Thank you for your assistance!


You can use .closest() and search for '.primary-nav__item' then add your class.
Example:
$('.nav__sub__item--active').closest('.primary-nav__item').addClass('primary-nav__item--active')


You may use:
.addClass( function ): function returning one or more space-separated class names to be added to the existing class name(s).
$('.primary-nav__item').addClass(function(idx, className) {
if ($(this).find('li.nav__sub__item--active').length > 0) {
return 'active';
}
})
.active {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="primary-nav__item primary-nav__item--sub js-header-sub-link">
<a class="primary-nav__link nav__link--sub js-header-sub-link-a" href="/collections/books">Books</a>
<div class="nav__sub" id="sub-3">
<div class="nav__sub-wrap">
<ul class="nav__sub__items o-list-bare">
<li class="nav__sub__item">
<a class="nav__sub__link" href="#">I'm a sub-link</a>
</li>
<li class="nav__sub__item nav__sub__item--sub js-header-sub-t-link nav__sub__item--active">
<a class="nav__sub__link" href="#">I'm a sub-link</a>
</li>
<li class="nav__sub__item">
<a class="nav__sub__link" href="#">I'm a sub-link</a>
</li>
</ul>
</div>
</div>
</li>


jQuery's closest() function is more efficient:
$('.nav__sub__item--active').each(function() {
$(this).closest('li.primary-nav__item').addClass('primary-nav__item--active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="primary-nav__item primary-nav__item--sub js-header-sub-link">
<a class="primary-nav__link nav__link--sub js-header-sub-link-a" href="/collections/books">Books</a>
<div class="nav__sub" id="sub-3">
<div class="nav__sub-wrap">
<ul class="nav__sub__items o-list-bare">
<li class="nav__sub__item">
<a class="nav__sub__link" href="#">I'm a sub-link</a>
</li>
<li class="nav__sub__item nav__sub__item--sub js-header-sub-t-link nav__sub__item--active">
<a class="nav__sub__link" href="#">I'm a sub-link</a>
</li>
<li class="nav__sub__item nav__sub__item--active">
<a class="nav__sub__link" href="#">I'm a sub-link</a>
</li>
</ul>
</div>
</div>
</li>
</ul>


You can use the jQuery closest method. It finds the first parent elemeent with a specific selector.
$( document ).ready(function() {
$('.nav__sub__item--active').closest('.primary-nav__item').addClass("active");
});
.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="primary-nav__item primary-nav__item--sub js-header-sub-link">
<a class="primary-nav__link nav__link--sub js-header-sub-link-a" href="/collections/books">Books</a>
<div class="nav__sub" id="sub-3">
<div class="nav__sub-wrap">
<ul class="nav__sub__items o-list-bare">
<li class="nav__sub__item">
<a class="nav__sub__link" href="#">I'm a sub-link</a>
</li>
<li class="nav__sub__item nav__sub__item--sub js-header-sub-t-link nav__sub__item--active">
<a class="nav__sub__link" href="#">I'm a sub-link</a>
</li>
<li class="nav__sub__item">
<a class="nav__sub__link" href="#">I'm a sub-link</a>
</li>
</ul>
</div>
</div>
</li>

Related

html menu and sub menu active

I assign an active class in my menu, but the active class is not removed from the mobile menu, it always remains active. And also, if the subcategory is selected, I want the category itself to have an active class. I tried, I couldn't. Thank you in advance to the friends who helped.
For example, if category1.php page is open, "category" has the deactivated class.
function updateMenu(url) {
const active = document.querySelector('.menu-item.active');
if (active !== null) {
active.classList.remove('active');
}
const links = Array.from(document.querySelectorAll('.menu-item'));
links.forEach(function(li){
let anchor = li.querySelector("a");
if(url.indexOf(anchor.href) > -1){
li.classList.add("active");
}
});
}
updateMenu(window.location.href);
<div class="header_side_container">
<div class="header_builder_component">
<nav class="main-menu">
<ul id="menu-main-menu" class="menu">
<li class="menu-item">
<span>Home</span>
</li>
<li class="menu-item">
<span>category</span>
<ul class="sub-menu">
<li class="menu-item">
<a href="Category1.php">
<span>Category 1</span>
</a>
</li>
<li class="menu-item">
<a href="Category2.php">
<span>Category 2</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<span>gallery</span>
</li>
<li class="menu-item">
<span>about</span>
</li>
<li class="menu-item">
<span>contact</span>
</li>
</nav>
</div>
</div>
<!--Mobil-->
<nav class="mobile_menu">
<ul id="menu-top_menu-1">
<li class="menu-item">
<span>Home</span>
</li>
<li class="menu-item">
<span>category</span>
<ul class="sub-menu">
<li class="menu-item">
<a href="Category1.php">
<span>Category 1</span>
</a>
</li>
<li class="menu-item">
<a href="Category2.php">
<span>Category 2</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<span>gallery</span>
</li>
<li class="menu-item">
<span>about</span>
</li>
<li class="menu-item">
<span>contact</span>
</li>
</ul>
</nav>

window.location.pathname is the property you need. Once you have it, you can find the filename (last part of the whole pathname) by using .substr and .lastIndexOf.
In this code snippet, the active item is the parent of JS, I used that as an example since the location.href for these SO snippets is https://stacksnippets.net/js, hence the pathname is /js, and finally, the filename is js.
Check the code and you'll see what I mean
HIH
function updateMenu(url) {
const active = document.querySelector('.menu-item.active');
if (active !== null) {
active.classList.remove('active');
}
const links = Array.from(document.querySelectorAll('.menu-item'));
links.forEach(function(li){
let anchor = li.querySelector("a");
if(anchor.href.indexOf(url) > -1) {
const parentLI = $(li).parents('.menu-item').get(0)
if(parentLI)
parentLI.classList.add("active");
else
li.classList.add("active");
}
});
}
const pathname = window.location.pathname, filename=pathname.substr(pathname.lastIndexOf('/') + 1);
updateMenu(filename);
li.active > a span{
font-weight: bold !important;
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header_side_container">
<div class="header_builder_component">
<nav class="main-menu">
<ul id="menu-main-menu" class="menu">
<li class="menu-item">
<span>Home</span>
</li>
<li class="menu-item">
<span>category</span>
<ul class="sub-menu">
<li class="menu-item">
<a href="Category1.php">
<span>Category 1</span>
</a>
</li>
<li class="menu-item">
<a href="js">
<span>JS</span>
</a>
</li>
<li class="menu-item">
<a href="Category2.php">
<span>Category 2</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<span>gallery</span>
</li>
<li class="menu-item">
<span>about</span>
</li>
<li class="menu-item">
<span>contact</span>
</li>
</ul>
</nav>
</div>
</div>
<!--Mobil-->
<nav class="mobile_menu">
<ul id="menu-top_menu-1">
<li class="menu-item">
<span>Home</span>
</li>
<li class="menu-item">
<span>category</span>
<ul class="sub-menu">
<li class="menu-item">
<a href="Category1.php">
<span>Category 1</span>
</a>
</li>
<li class="menu-item">
<a href="js">
<span>JS too</span>
</a>
</li>
<li class="menu-item">
<a href="Category2.php">
<span>Category 2</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<span>gallery</span>
</li>
<li class="menu-item">
<span>about</span>
</li>
<li class="menu-item">
<span>contact</span>
</li>
</ul>
</nav>

Change parent class on list element based on child link element

I have to modify li class "blackcat-21 wnode" adding "active", because there is a link with class selected inside:
<a id="cat-21" href="" class="selected">link</a>
the parent "li" should change in "blockcat-21 wnode active" .
<li class="blockcat-21 wnode">
<a id="cat-21" href="" class="selected">link</a>
<ul style="display: block;">
<li class="blockcat-33">
<a id="cat-33" href="" class="noselect" title="">link 2</a>
</li>
<li class="blockcat-22">
<a id="cat-33" href="" class="noselect" title="">link 2</a>
</li>
<li class="blockcat-34 last">
<a id="cat-34" href="" class="noselect" title=""></a>
</li>
</ul>

Not a too difficult job though:
When the selected anchor element is a descendant of wnode
Vanilla
We use document.querySelector with the selector a.selected. That searches for a an anchor element with class selected. Then we use closest to find it. And use classlist to add the class. If the browser doesn't support closest we can use a polyfill.
document.querySelector returns the first child found. If you want to update more nodes that use brk's solution.
//using very modern browsers
if (Element.prototype.closest) {
document.querySelector("a.selected").closest(".wnode").classList.add("active");
}
//else
else {
//use the polyfill from MDN
if (!Element.prototype.matches)
Element.prototype.matches = Element.prototype.msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
if (!Element.prototype.closest)
Element.prototype.closest = function(s) {
var el = this;
if (!document.documentElement.contains(el)) return null;
do {
if (el.matches(s)) return el;
el = el.parentElement;
} while (el !== null);
return null;
};
document.querySelector("a.selected").closest(".wnode").classList.add("active");
}
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="blockcat-21 wnode">
<a id="cat-21" href="" class="selected">link</a>
<ul style="display: block;">
<li class="blockcat-33">
<a id="cat-33" href="" class="noselect" title="">link 2</a>
</li>
<li class="blockcat-22">
<a id="cat-33" href="" class="noselect" title="">link 2</a>
</li>
<li class="blockcat-34 last">
<a id="cat-34" href="" class="noselect" title="">link 2</a>
</li>
</ul>
</li>
With jQuery:
We select the active link using a.selected. We can use jQuery's closest here to get up the DOM-tree to the wnode ancestor. Then just use addClass and viola.
$("a.selected").closest(".wnode").addClass("active");
.active{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="blockcat-21 wnode">
<a id="cat-21" href="" class="selected">link</a>
<ul style="display: block;">
<li class="blockcat-33">
<a id="cat-33" href="" class="noselect" title="">link 2</a>
</li>
<li class="blockcat-22">
<a id="cat-33" href="" class="noselect" title="">link 2</a>
</li>
<li class="blockcat-34 last">
<a id="cat-34" href="" class="noselect" title="">link 2</a>
</li>
</ul>
</li>

You can use querySelectorAll and parentNode method. Here document.querySelectorAll('a.selected') will select all anchor tag which have selected class & parentNode will select it's parent
var getAllSelected = document.querySelectorAll('a.selected');
for (var x = 0; x < getAllSelected.length; x++) {
getAllSelected[x].parentNode.classList.add('active')
}
.active {
color: green;
}
<li class="blockcat-21 wnode">
<a id="cat-21" href="" class="selected">link</a>
<ul style="display: block;">
<li class="blockcat-33">
<a id="cat-33" href="" class="noselect" title="">link 2</a>
</li>
<li class="blockcat-22">
<a id="cat-33" href="" class="noselect" title="">link 2</a>
</li>
<li class="blockcat-34 last">
<a id="cat-34" href="" class="noselect" title=""></a>
</li>
</ul>

Angular 4 Bootstrap Menu Stay Open on Page Swap

So I am developing an Angular 4 app using a bootstrap menu. The Nav is a component that is shown in all views of the app. When you use the submenu link you get a page swap but the nav resets to the default state. I need it to remember the last state it was in or prevent the collapse from happening. I looked at examples on Stack that use jQuery, however, I am using Angular 4, so that would not be a solution for me here. Check out the other examples I have looked at for solutions:
How do I keep the child menu open when loaded?
bootstrap dropdown open on pageload
Keep Bootstrap Dropdown open in Navbar no matter what
How to keep a submenu open when the page changes
Bootstrap toggle menu expand on page load
The one using localStorage was an interesting idea but I couldn't figure that out. Anyways here is the code I have:
nav.component.html
<div class="nav flex-column col-sm-3 col-md-2">
<div class="nav-title" (mouseenter)="mouseEnter($event)" (mouseleave)="mouseLeave($event)">
<div [ngClass]="search">
<img src="../../assets/img/INEO-LOGO.svg" alt="ineo-logo" class="logo">
<i class="fa fa-search fa-1x search-icon" aria-hidden="true"></i>
<input type="text" class="form-control nav-subtext" placeholder="Search Transferee">
<i class="glyphicon glyphicon-remove-circle clear" (click)="clear()"></i>
</div>
</div>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Transferee Dashboard</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Setup</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Accounting</a>
</li>
<li class="nav-menu nav-text" data-toggle="collapse" data-target="#collapse" (click)="toggleCollapse($event)" id="toggle">
<a class="{{nav}}" id="tools">Tools</a>
<div class="collapse" id="collapse">
<ul class="submenu">
<li class="nav-subtext">
<a routerLink="/approvals">Approvals</a>
</li>
<li class="nav-subtext">
<a routerLink="/change-auth">Change Authorization ID</a>
</li>
<li class="nav-subtext">
<a routerLink="/copyfile">Copy Files</a>
</li>
<li class="nav-subtext">
<a routerLink="/email">Email</a>
</li>
<li class="nav-subtext">
<a routerLink="/templates">Email Templates</a>
</li>
<li class="nav-subtext">
<a routerLink="/encrypt">Encryption</a>
</li>
<li class="nav-subtext">
<a routerLink="/excel-import">Excel Import</a>
</li>
<li class="nav-subtext">
<a routerLink="/formulas">Formulas</a>
</li>
<li class="nav-subtext">
<a routerLink="/global-updates">Global Updates</a>
</li>
<li class="nav-subtext">
<a routerLink="/import-export">Import Export</a>
</li>
<li class="nav-subtext">
<a routerLink="/maintain-log">Maintain Log</a>
</li>
<li class="nav-subtext">
<a routerLink="/preferences">Preferences</a>
</li>
<li class="nav-subtext">
<a routerLink="/restore-delete-history">Restore/Delete/History</a>
</li>
<li class="nav-subtext">
<a routerLink="/task-policies">Task Policies</a>
</li>
<li class="nav-subtext">
<a routerLink="/ticklers">Ticklers</a>
</li>
<li class="nav-subtext">
<a routerLink="/unlock">Unlock Records</a>
</li>
<li class="nav-subtext">
<a routerLink="/user-tasks">User Tasks</a>
</li>
</ul>
</div>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Reports</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Custom</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Tax</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Lump Sum</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Global Compensation</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">System Information</a>
</li>
</div>
nav.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.scss']
})
export class NavComponent implements OnInit {
nav: string = '';
show: boolean = false;
search: string = 'search';
toggleCollapse() {
// change show
this.show = !this.show;
// Change style of active link
if (this.show !== true) {
this.nav = 'nav-link';
} else {
this.nav = 'nav-link-active nav-menu-active-text';
}
}
mouseEnter($event) {
this.search = $event.type == 'mouseenter' ? 'search-box' : 'search';
}
mouseLeave($event) {
this.search = $event.type == 'mouseleave' ? 'search' : 'search-box';
}
clear() {
let text = document.getElementsByTagName('input');
for (let i = 0; i < text.length; i ++) {
if(text[i].type === 'text' && text[i].value !== '') {
text[i].value = '';
}
}
}
constructor() { }
ngOnInit() {
}
}
Any help would be great!
Also if you provide an answer please explain it.
Thanks

The answer to this is that the toggled list has to be outside the parent element. The problem is by clicking a submenu item the parent is refiring the toggle.
See HTML:
<div class="nav flex-column col-sm-3 col-md-2">
<div class="nav-title" (mouseenter)="mouseEnter($event)" (mouseleave)="mouseLeave($event)">
<div [ngClass]="search">
<img src="../../assets/img/INEO-LOGO.svg" alt="ineo-logo" class="logo">
<i class="fa fa-search fa-1x search-icon" aria-hidden="true"></i>
<input type="text" class="form-control nav-subtext" placeholder="Search Transferee">
<i class="glyphicon glyphicon-remove-circle clear" (click)="clear()"></i>
</div>
</div>
<li class="nav-menu nav-text">
<a class="nav-link">Transferee Dashboard</a>
</li>
<li class="nav-menu nav-text">
<a class="nav-link">Setup</a>
</li>
<li class="nav-menu nav-text">
<a class="nav-link">Accounting</a>
</li>
<li class="nav-menu nav-text" (click)="toggleCollapse()">
<a [ngClass]=" show ? 'active' : ''">Tools</a>
</li>
<ul class="submenu" *ngIf="show">
<li class="nav-subtext">
<a >Approvals</a>
</li>
<li class="nav-subtext">
<a >Change Authorization ID</a>
</li>
<li class="nav-subtext">
<a >Copy Files</a>
</li>
<li class="nav-subtext">
<a >Email</a>
</li>
<li class="nav-subtext">
<a >Email Templates</a>
</li>
<li class="nav-subtext">
<a >Encryption</a>
</li>
<li class="nav-subtext">
<a >Excel Import</a>
</li>
<li class="nav-subtext">
<a >Formulas</a>
</li>
<li class="nav-subtext">
<a >Global Updates</a>
</li>
<li class="nav-subtext">
<a >Import Export</a>
</li>
<li class="nav-subtext">
<a >Maintain Log</a>
</li>
<li class="nav-subtext">
<a >Preferences</a>
</li>
<li class="nav-subtext">
<a >Restore/Delete/History</a>
</li>
<li class="nav-subtext">
<a >Task Policies</a>
</li>
<li class="nav-subtext">
<a >Ticklers</a>
</li>
<li class="nav-subtext">
<a routerLink="unlock">Unlock Records</a>
</li>
<li class="nav-subtext">
<a >User Tasks</a>
</li>
</ul>
<li class="nav-menu nav-text">
<a class="nav-link">Reports</a>
</li>
<li class="nav-menu nav-text">
<a class="nav-link">Custom</a>
</li>
<li class="nav-menu nav-text">
<a class="nav-link">Tax</a>
</li>
<li class="nav-menu nav-text">
<a class="nav-link">Lump Sum</a>
</li>
<li class="nav-menu nav-text">
<a class="nav-link">Global Compensation</a>
</li>
<li class="nav-menu nav-text">
<a class="nav-link">System Information</a>
</li>
</div>

Dropdown menu on click

I have tried numerous JS queries and none seem to be working.
I want to only show my dropdown menus when the list item they relate to is clicked, they need to show until the user either clicks off the ul or clicks a link.
Here is my html:
<div class="sub-nav">
<div class="container">
<ul>
<li class="active">All</li>
<li>Videos</li>
<li>Images</li>
<li>Maps</li>
<li>News</li>
<a href="#">
<li id="has-sub">More
<ul>
<li>Shopping</li>
<li>Books</li>
<li>Flights</li>
<li>Apps</li>
</ul>
</li>
</a>
<a href="#">
<li id="search-tools">Search Tools
<ul>
<li id="has-sub">Any Country</li>
<li id="has-sub">Any Time</li>
<li id="has-sub">All Results</li>
</ul>
</li>
</a>
</ul>
</div>
</div>

Try this:
$("li:has(ul)").click(function(){
$("ul",this).toggle('slow');
});
Make sure you have the jQuery library.

In this solution dropdown menus collapse when a link is clicked as you asked.
$('a').click(function(){
$('.container ul:not(:first-child)').hide();
if($(this).next().is('ul')){
$(this).next().toggle('slow');
}
});
ul ul{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub-nav">
<div class="container">
<ul>
<li class="active">All</li>
<li>Videos</li>
<li>Images</li>
<li>Maps</li>
<li>News</li>
<a href="#"><li id="has-sub">More
<ul>
<li>Shopping</li>
<li>Books</li>
<li>Flights</li>
<li>Apps</li>
</ul>
</li></a>
<a href="#"><li id="search-tools">Search Tools
<ul>
<li id="has-sub">Any Country</li>
<li id="has-sub">Any Time</li>
<li id="has-sub">All Results</li>
</ul>
</li></a>
</ul>
</div>
</div>

<div class="sub-nav">
<div class="container">
<ul>
<li class="active">All</li>
<li>Videos</li>
<li>Images</li>
<li>Maps</li>
<li>News</li>
<li id="has-sub">More
<ul>
<li>Shopping</li>
<li>Books</li>
<li>Flights</li>
<li>Apps</li>
</ul>
</li>
<li id="search-tools">Search Tools
<ul>
<li id="has-sub">Any Country</li>
<li id="has-sub">Any Time</li>
<li id="has-sub">All Results</li>
</ul>
</li>
</ul>
</div>
</div>
this should work

Load jQuery library alternatively you can use like this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Apply style to your menu html as below
<style>
li > ul{display:none;}
.show {display:block;}
</style>
Now this is what you are looking for.
<script>
jQuery("li:has(ul)").click(function(){
jQuery("ul",this).toggleClass('show');
});
</script>
$("li:has(ul)").click(function(){
$("ul",this).toggleClass('show');
});
li > ul{display:none;}
.show {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub-nav">
<div class="container">
<ul>
<li class="active">All</li>
<li>Videos</li>
<li>Images</li>
<li>Maps</li>
<li>News</li>
<a href="#"><li id="has-sub">More
<ul>
<li>Shopping</li>
<li>Books</li>
<li>Flights</li>
<li>Apps</li>
</ul>
</li></a>
<a href="#"><li id="search-tools">Search Tools
<ul>
<li id="has-sub">Any Country</li>
<li id="has-sub">Any Time</li>
<li id="has-sub">All Results</li>
</ul>
</li></a>
</ul>
</div>
</div>
Use jQuery instead of $, because some frameworks or cms tools have conflict with it. So jQuery works always.

Add class to every last-item

I would like to add that class "last-item" every last li.
Im trying this but without sucess:
<script>
$(".cbp-tm-submenu .product-categories li .children li:last-child").addClass("last-item");
<script>
I tried put on header and on footer.
HTML:
<ul class="cbp-tm-submenu">
<img class="backgroundtooltiptop" alt="background tooltip" src="http://localhost:8888/era420/wp-content/themes/era420/images/tooltipbackgroundtop.png">
<li id="woocommerce_product_categories-4" class="widget woocommerce widget_product_categories">
<ul class="product-categories">
<li class="cat-item cat-item-16 current-cat cat-parent">
Lançamentos
<ul class="children">
<li class="cat-item cat-item-17">
teste
</li>
<li class="cat-item cat-item-18">...</li>
<li class="cat-item cat-item-19">...</li>
</ul>
</li>
</ul>
</li>
<img class="backgroundtooltipbot" alt="background tooltip bot" src="http://localhost:8888/era420/wp-content/themes/era420/images/tooltipbackgroundbot.png">
</ul>

This is enough:
$(".cbp-tm-submenu li:last-child").addClass("last-item");

Categories