1

I have a markup like this

    <ul class = "main_nav">
    <li>
        <ul class = "sub_menu">
            <li>hello</li>
            <li>world</li>
            <li>English</li>
        </ul>
    </li>
    <li>
        <ul class = "sub_menu">
            <li>hello</li>
            <li>world</li>
            <li>English</li>
        </ul>
    </li>
    <li>
        <ul class = "sub_menu">
            <li>hello</li>
            <li>world</li>
            <li>English</li>
        </ul>
    </li>
</ul>

Now I have given border bottom each li inside sub_menu, but it is coming all the lis I dont want to see border bottom for last one so I have used jquery script like this:

$('.sub_menu > li').last().css('border', '0');

but it is effective for only last one.
How can I remove border-bottom for last li of each section

4

5 回答 5

3 
$('.sub_menu > li:last-child').css('border', '0');

:last-child伪元素选择每个父子组中的最后一个元素，而不是所有匹配的元素中的最后一个。

于 2013-04-06T12:14:33.720 回答
2

不需要 jquery 只需在 CSS 中使用 :last-child 选择器来关闭最后一个元素的边框

.sub_menu > li {
    border-bottom: solid black 1px;
}

.sub_menu > li:last-child {
    border: none;
}

编辑：正如 Praveen 评论的那样，:last-child仅 IE8 不支持:first-child

因此，您总是可以.last在每个子菜单的最后一项中添加一个类，并使用此 CSS 规则而不是上面的带有 :last-child 伪选择器的规则

<li class='last'>English</li>

.sub_menu > li.last {
    border: none;
}
于 2013-04-06T12:19:38.353 回答
0 
$('.sub_menu').each(function() {
    $(this).find('li:last').css('border','0');
});

There. :)

于 2013-04-06T12:12:52.367 回答
0

尝试这个：

$('.sub_menu').each(function() {
    $(this).find('li').last().css('border', '0');
});

演示

于 2013-04-06T12:13:44.187 回答
0

为什么不使用.each()函数？

$( ".sub_menu" ).each( function() {
    $( this ).children( "li" ).last().css( 'border', '0' );
} );

您实际上可以使用不同的方式执行相同的操作：

$( ".sub_menu > li:last-child " ).css( 'border', '0' );

此外，在 CSS 中：

.sub_menu > li:last-child {border: 0;}

注意： CSS 方法在 IE 8 及以下版本中不起作用。

于 2013-04-06T12:15:33.393 回答