Question

尝试选择此列表中的最后一个LI并为其添加一个类 - 似乎无法使其工作？我有什么想法吗？

Baiscally想要将类“noBottomBorder”添加到subnav列表中的最后一个LI - 例如在这个例子中“商业”，但不能硬编码，因为subnav列表是动态CMS控制...

jQuery的：

<script type="text/javascript">
$("ul.subNavWrapper li:last-child").addClass("noBottomBorder");
</script>

HTML：

<div class="navWrapper">
<ul>
<li><a href="#.html" target="_self" title="Navigate to the Home page" class="navButton primaryLink01">Home</a></li>
<li><a href="#.html" target="_self" title="Navigate to the Our Approach page" class="navButton primaryLink02">Our Approach</a></li>
<li><a href="#.html" target="_self" title="Navigate to the The Process page" class="navButton primaryLink03">The Process</a></li>
<li><a href="#.html" target="_self" title="Navigate to the Examples of Work page" class="navButton primaryLink04">Examples of Work</a>

<ul class="subNavWrapper">
<li><a href="#.html" target="_self" title="Navigate to the The Extenstions page" class="subNavButton">Extenstions</a></li>
<li><a href="#.html" target="_self" title="Navigate to the The Refurbishments page" class="subNavButton">Refurbishments</a></li>
<li><a href="#.html" target="_self" title="Navigate to the The Kitchens page" class="subNavButton">Kitchens</a></li>
<li><a href="#.html" target="_self" title="Navigate to the The Bathrooms page" class="subNavButton">Bathrooms</a></li>
<li><a href="#.html" target="_self" title="Navigate to the The Bespoke Carpentry page" class="subNavButton">Bespoke Carpentry</a></li>
<li><a href="#.html" target="_self" title="Navigate to the The General page" class="subNavButton">General</a></li>
<li><a href="#.html" target="_self" title="Navigate to the The Commercial page" class="subNavButton">Commercial</a></li>
</ul>

</li>
<li><a href="#.html" target="_self" title="Navigate to the Press page" class="navButton primaryLink05">Press</a></li>
<li><a href="#.html" target="_self" title="Navigate to the Testimonials page" class="navButton primaryLink06">Testimonials</a></li>
<li><a href="#.html" target="_self" title="Navigate to the Fees page" class="navButton primaryLink07">Fees</a></li>
<li><a href="#.html" target="_self" title="Navigate to the Contact page" class="navButton primaryLink08">Contact</a></li>
</ul>
</div>

Answer 1

更新回答：http://jsfiddle.net/YQdL9/

只需提供.subNavWrapper班to ul。

$(function(){ 
    $("ul.subNavWrapper li:last-child").addClass("noBottomBorder");
});

Answer 2

试试这个：

$("div.subNavWrapper li:last-child").addClass("noBottomBorder");

Answer 3

使用：最后选择器

$(".subNavWrapper li:last").addClass("noBottomBorder");

你也有格式错误的HTML ..

对于最后一个列表，

</li>应该是<ul> ..

<强> Check Fiddle

Answer 4

简短的回答我的信息很少：

我必须假设<script>元素在构建<ul>...菜单之前执行。因此，选择器不会选择任何元素，因为它们尚不存在于DOM中。

jQuery有一个方便的DOM就绪事件，简称为document.ready，但它的简写是：

jQuery(function ($) {
    ...your code...
});

它类似于onload，但性能更高。

您的代码应为：

jQuery(function ($) {
    $("ul.subNavWrapper li:last-child").addClass("noBottomBorder");
});

假设它们具有正确的名称，我应该选择正确的元素，并且我没有做过任何拼写错误。

所有人都说，在我看来，你只是想在每个元素之间放置一个边框，而不是在底部悬挂边框。您可能最好不要添加顶部边框并从第一个元素中删除边框，而不是为每个元素添加底部边框：

li {
    border-top: 1px solid <color>;
}
li:first-child {
    border-top: 0;
}

最后<li>选择器无法正常工作</li>

4 个答案: