jquery - 最后的选择器不工作

Question

试图选择此列表中的最后一个 LI 并向其添加一个类 - 似乎无法使其工作？有什么想法我在这里有什么问题吗？

Baiscally 想要将类“noBottomBorder”添加到子导航列表中的最后一个 LI - 例如，在此示例中为“商业”，但不能硬编码，因为子导航列表是动态 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

使用:last选择器

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

此外，您的 HTML 格式不正确。

</li> 应该是<ul>最后一个列表..

检查小提琴

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