jQuery + CSS Manipulation using each()
11,246
Solution 1
You don't need to call .each
.
Instead, you can use the following selector:
$("#nav li ul > li:last-child a").css({ border: 0, padding: 0 });
Solution 2
$("#nav li ul").each(function() {
$("li:last a", this)
.css('border', '0 none')
.css('padding','0');
});
Author by
Atif
I manage engineering teams at .com Know more about me at Atif.work. I am available through Linkedin for networking.
Updated on June 05, 2022Comments
-
Atif about 2 years
I am trying to create a css menu. I would like to remove border and padding for every last
li > a
element on thechild ul
tag. (sorry for confusing)Here is the code for the menu
<ul id="nav"> <li><a id="cat1" href="#">Menu 1</a></li> <li><a id="cat2" href="#">Menu 2</a></li> <li><a id="cat3" href="#">Menu 3</a> <ul> <li><a href="#">Sub Item 1 - M3</a></li> </ul> </li> <li><a id="cat4" href="#">Menu 4</a> <ul> <li><a href="#">Sub Item 2 - M3</a></li> <li><a href="#">Sub Item 3 - M3</a></li> <li><a href="#">Sub Item 4 - M3</a></li> </ul> </li> </ul>
The code must remove border and padding for last elements that is
<li><a href="#">Sub Item 1 - M3</a></li> <li><a href="#">Sub Item 4 - M3</a></li>
Tried this but it takes off border for only sub item 4
$("#nav li ul").each(function(index) { $("#nav li ul > :last a").css('border','0 none'); $("#nav li ul > :last a").css('padding','0'); });