0

このリストの最後の LI を選択してそれにクラスを追加しようとしています - 動作しないようです?? 私がここで間違っているアイデアはありますか？

サブナビリストの最後のLIにクラス「noBottomBorder」を基本的に追加したい-たとえば、この例では「商用」ですが、サブナビリストは動的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>
4

4 に答える 4

0

更新された回答: http://jsfiddle.net/YQdL9/

.subNavWrapperクラスを与えるだけto ulです。

$(function(){ 
    $("ul.subNavWrapper li:last-child").addClass("noBottomBorder");
});
于 2012-11-30T17:39:58.150 に答える
0

これを試して：

$("div.subNavWrapper li:last-child").addClass("noBottomBorder");
于 2012-11-30T17:43:13.607 に答える
0

:lastセレクターを使用する

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

また、HTMLの形式が正しくありません..

</li><ul>最後のリストの はず..

フィドルをチェック

于 2012-11-30T17:54:42.227 に答える
0

私が持っている情報がほとんどない短い答え：

メニューが構築さ<script>れる前に要素が実行されると仮定する必要があります。<ul>...このため、要素は DOM にまだ存在しないため、セレクターは要素を選択しません。

jQuery には と呼ばれる便利な DOM Ready イベントがあります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;
}
于 2012-11-30T18:01:36.223 に答える