Question

我有这样的标记

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

现在我在border bottom内li分别sub_menu，但它是所有的lis我不想看到最后一个边界底部，所以我用过像这样的jquery脚本：

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

但它只对最后一个有效。
如何删除每个部分的最后li的边框底部

Answer 1

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

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

Answer 2

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

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

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

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

所以你总是可以在每个子菜单的最后一项中添加一个.last类，并使用这个CSS规则而不是上面的那个：last-child伪选择器

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

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

Answer 3

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

有。：）

Answer 4

试试这个：

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

<强> Demo

Answer 5

为什么不使用.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及以下版本中无效。

jquery last（）用于多个元素

5 个答案: