How do i add a class to the last ul in div?
Question
How do u get the last ul in a div? This is what I have tried so far.
// $('.deliveryChargeDetail ul').last().addClass("lastActive");
// alert($('.deliveryChargeDetail ul').last());
// $('deliveryChargeDetail > ul:last-child').addClass('lastActive');
// $('deliveryChargeDetail.ul:last').addClass('lastActive');
// $('ul:last', this).addClass('lastActive');
$("deliveryChargeDetail :last-child").addClass('lastActive');
edit :
ohh..I forgot to add dot: / I tried all the above statemnets with dot before "deliveryChargeDetail " , its still not working..whats is the right way to add class to the last ul?
I have another thing on my mind regarding this...lets say theer is a for loop to bind this div that has class "deliveryChargeDetail " and there are atleaset 5 uls BUT some lis of every ul may not have text or something in them ie their html might be empty..so lets say if only the first three uls of this div are filled with values, then how do I fetch the last UL in that forloop that is NOT empty and give it the class "lastActive"..thats what I wanna do..Please help me out..thanks
edit 2 :- Below is the html for the div in which I am dynamically binding these UL. I want the LAST FILLED UL to be given the class "lastActive"
<div class="myDiv">
<div class="leg">
Delivery Charge Details</div>
<div class="clear">
</div>
<div class="main deliveryChargeDetail">
<ul class="gridHead">
<li>Amt 1 </li>
<li>Amt 2</li>
<li>Charge</li>
<div class="clear">
</div>
</ul>
<ul>
<li>0.00</li>
<li>20.00</li>
<li>5.00</li><div class="clear">
</div>
</ul>
<ul>
<li>21.10</li>
<li>30.00</li>
<li>3.99</li><div class="clear">
</div>
</ul>
<ul>
<li>31.10</li>
<li>50.00</li>
<li>3.50</li><div class="clear">
</div>
</ul>
</div>
</div>
2 answers
solution1
1 2011-11-20 14:13:39
You almost got it. you basically only missed the . in the selector to tell jQuery to look for an class and specify to look for the last elements of the type ul .
$(".deliveryChargeDetail ul").last().addClass('lastActive');
You could also use a modified version of your line:
$(".deliveryChargeDetail ul:last-child").addClass('lastActive');
Sample
http://jsfiddle.net/uh6Z7/3/
solution2
0
I think this will help.
<!DOCTYPE html>
<html>
<head>
<style>
li:last-child{color:red;}
</style>
<script src="jquery-1.4.4.js"></script>
<script type="text/javascript">
$("p.two:last-child").css("color","red");
$("p:last-child").css("color","yellow");
</script>
</head>
<body>
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
<div>
<p class="one">a</p>
<p class="one">a</p>
<p class="two">a</p><p class="two">a</p>
<p class="two">a</p><p>a</p>
<p>a</p>
</div>
</body>
</html>
You would have to use $("ul:last-child").addCla.....
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.