jQueryで各子要素の最後の要素だけ文字の色を変えたいのですが、うまく変わりません。

<ul class="a">
<li>1</li>
<li>2</li>←ココの文字を変えたい
<ul class="a">
<li>3</li>←ココの文字を変えたい
</ul>
</ul>
<ul class="a">
<li>4</li>←ココの文字を変えたい
</ul>

$(".a>li:last-child").css("color","red");
とやったら<li>3</li>と<li>4</li>しか色が変わりません。
どのようにすれば良いのでしょう?よろしくお願いします。

回答の条件
  • 1人10回まで
  • 登録:2011/07/19 04:30:30
  • 終了:2011/07/26 04:35:03

回答(0件)

回答はまだありません

  • id:rouge_2008
    一つ目のリストは入れ子ですか?
    入れ子にする場合、<li>2の閉じタグの位置は、<li>3</li></ul>の後ろではないでしょうか?
    ※項目数が少ないと問題点が分かりにくいので、以下は項目数を増やしてあります。

    <ul class="a">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4
    <ul class="a">
    <li>5</li>
    <li>6</li>
    <li>7</li>
    </ul></li>
    </ul>
    <ul class="a">
    <li>8</li>
    <li>9</li>
    <li>10</li>
    </ul>


    閉じタグの位置を変更するだけでは解決しませんので、以下目的の解決方法になります。
    「$("li").not(".a>li:first-child").css("color","red");」の後で、さらに「$("li").not(".a>li:last-child").css("color","black");」で余分に変更された色を元に戻します。
    もっとスマートな方法があるかもしれませんので、他の人の回答を待ってみてください。
  • id:rouge_2008
    以下のように書いても同じ結果を得られます。

    $("li:not(.a>li:first-child)").css("color","red");
    $("li:not(.a>li:last-child)").css("color","black");
  • id:zaq2
    すいません。ちょっと例文の項目数が少なすぎましたね。
    rouge_2008さんが書いてくれた <li>4<ul class="a"></li></ul> ではなくて<li>4の閉じタグの位置は<ul class="a">の前にあります。以下、訂正版です。

    <ul class="a">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>←ココの文字を変えたい
    <ul class="a">
    <li>5</li>
    <li>6</li>
    <li>7</li>←ココの文字を変えたい
    </ul>
    </ul>
    <ul class="a">
    <li>8</li>
    <li>9</li>
    <li>10</li>←ココの文字を変えたい
    </ul>

    一様、変わる方法がありましたが、
    $(".a>li:last-of-type").css("color","red");
    これでは、ie8は動きませんでした。firefox,chromeではうまくいきましたけど...
    他にいい方法はがありましたら、よろしくお願いします。
  • id:ja2015
    http://shinseidataservice.wordpress.com/2009/05/19/html-ul-ol-li-%E3%83%AA%E3%82%B9%E3%83%88%E3%81%AE%E5%85%A5%E3%82%8C%E5%AD%90/

    上記にあるとおり、リストを入れ子にする場合に、</li>のあとに<ul>とするのは文法的に正しくありません。
    正しくないんだから、正しく表示されなくてもおかしくないですね。

    この書き方で無理に解釈するなら、最初の<ul class="a">のlast-childは、<li>4</li>じゃなくて、
    <ul class="a">
    <li>5</li>
    <li>6</li>
    <li>7</li>←ココの文字を変えたい
    </ul>
    になるんじゃないでしょうか。
  • id:zaq2
    ja2015さん、コメントありがとうございます。
    リストの入れ子は文法的に正しくないみたいですね。
    でも、<div>や<P>タグでもいいから各親子要素の最後の要素だけ文字の色を変えたいのです。

    <div class="a">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>←ココの文字を変えたい
    <div class="a">
    <p>5</p>
    <p>6</p>
    <p>7</p>←ココの文字を変えたい
    </div>
    </div>

    $(".a>p:last-child").css("color","red");
    は<p>7</p>のみ変わる
    $(".a>p:last-of-type").css("color","red");
    だと,<p>4</p>、<p>7</p>が変わり、意図した動作をします。

    $(".a>p:last-child").css("color","red"); でうまくいかないのは、":last-child" が<div class="a">の孫要素の<p>まで調べるので駄目だと思います。

    $(".a>p:last-of-type").css("color","red"); でうまくいくのは、":last-of-type" は<P>を親子要素までしか調べないから意図した動作するじゃないかな?たぶん...
    ":last-of-type"はcss3のセレクタだから? IE8では動かないみたいです。
  • id:zaq2
    自己解決しましたので報告しときます。
    セレクタの ":last-child" や ":last-of-type" は下記のurlに書いてあるようにcss3の表現でIEシリーズは対応してないので使用するのをやめました。":last-child" はIE8では動作したけど...
    http://design-spice.com/2011/05/25/css3-selector-jquery/


    [サンプル]
    <div class="a">
    <p>1</p>
    <p>2</p>←ココの文字を変えたい
    <div class="a">
    <p>3</p>
    <p>4</p>
    <p>5</p>←ココの文字を変えたい
    </div>
    </div>
    <div class="a">
    <p>6</p>
    <p>7</p>←ココの文字を変えたい
    </div>

    最初に、

    a =$("div.a");

    で<div>の親子孫を取り出す。a の中に配列が3つ入っている
    中はたぶんこんな感じ..ちがうかな?

    a[0]
    <div class="a">
    <p>1</p>
    <p>2</p>
    <div class="a">
    <p>3</p>
    <p>4</p>
    <p>5</p>
    </div>
    </div>

    a[1]
    <div class="a">
    <p>3</p>
    <p>4</p>
    <p>5</p>
    </div>

    a[2]
    <div class="a">
    <p>6</p>
    <p>7</p>
    </div>

    それをループ文を使って一つ一つ処理

    for(i = 0, l = a.length; i < l ; ++i) {
    b =$(a[i]).children("p")
    $(b[b.length-1]).css("color","red");
    }

    a[0]の処理の場合
    .children("p")で a[0]の子要素の<P>タグのみ取り出して、 b の中に配列が2つ入る

    b[0]  
    <p>1</p>   

    b[1]
    <p>2</p>


    この最後のb[1]を変えたいので、b.length で配列の数を数えて
    0が1の配列の数え方に合わせて1を引いてます。

    これで意図した、親子要素の最後の要素の色を変える動作になりました。
    もっといい方法がある気がしますが...
    css3のセレクタを使わないので古いIEでも動くので、よしとしてます。
  • id:zaq2
    別の場所で似たような質問したら

    $("div.a > p").filter (function () { return !$(this).nextAll("p").length
    }).css("color", "red");

    これだけでイケル
    こっちのほうがスマート

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません