如何在div中的最后一个ul中添加一个类?

时间:2011-11-20 14:04:58

标签: javascript jquery

你如何获得div中的最后一个ul?这是我到目前为止所尝试过的。

//            $('.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');

编辑

哦,我忘了添加点:/我在“deliveryChargeDetail”之前尝试了所有上面带有点的状态网,它仍然没有工作..whats是将类添加到最后一个ul的正确方法吗?

我还有另外一件事就是这个...让我们说这是一个for循环来绑定这个具有类“deliveryChargeDetail”的div并且有5个uls但是每个ul的一些lis可能没有文本或者其他东西在他们中,即他们的html可能是空的...所以,如果只有这个div的前三个ul填充了值,那么我如何获取非空的forloop中的最后一个UL并给它类“lastActive” ..我想做什么..请帮帮我..谢谢

编辑2: - 下面是我动态绑定这些UL的div的html。我希望最后填充的UL被赋予“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 个答案:

答案 0 :(得分:1)

你几乎得到了它。你基本上只错过选择器中的.来告诉jQuery寻找一个类并指定查找类型ul的最后一个元素。

$(".deliveryChargeDetail ul").last().addClass('lastActive');

您还可以使用线路的修改版本:

$(".deliveryChargeDetail ul:last-child").addClass('lastActive');

<强>示例
http://jsfiddle.net/uh6Z7/3/

答案 1 :(得分:0)

我认为这会有所帮助。

<!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>

您必须使用$("ul:last-child").addCla.....