2

次のような構造のリストがあります。

<ul class="tree" id="tree">
    <li>1</li>
        <ul>
            <li><a href="?character=?">2</a></li>
            <li><a href="?character=?">3</a></li>
                <ul>
                    <li><a href="?character=?">4</a></li>
                    <li><a href="?character=?">5</a></li>
                </ul>
            <li><a href="?character=?">6</a></li>
                <ul>
                    <li><a href="?character=?">7</a></li>
                    <li><a href="?character=?">8</a></li>
                </ul>
        </ul>
</ul>

私がする必要があるのは、jQuery を使用last:childsしてリスト内のすべて (つまり、1,5,6,8) を選択し、すべてを与えることclass="last"です。

何らかの理由でCSSの使用ul:last childがまったく機能せず、試してみました

<script type="text/javascript">
   $(document).ready(function () {
        $("ul li:last-child").addClass("last");
   });
  </script>

うまくいきませんでした。どんな助けでも大歓迎です!

4

8 に答える 8

4

1、5、6、8 が選択されました

 $(document).ready(function () {
        $("ul > li:last-of-type").addClass("last");
    });

http://jsfiddle.net/42v8A/

于 2013-03-29T09:17:01.243 に答える
0

<ul> <li>構造が間違っています。これが正しい構造です

         <ul class="tree" id="tree">
           <li>1</li>
             <li>
                  <ul>
                    <li><a href="?character=?">2</a></li>
                    <li><a href="?character=?">3</a></li>
                    <li>
                        <ul>
                           <li><a href="?character=?">4</a></li>
                           <li><a href="?character=?">5</a></li>
                        </ul>
                    </li>
                    <li><a href="?character=?">6</a></li>
                    <li>
                       <ul>
                         <li><a href="?character=?">7</a></li>
                         <li><a href="?character=?">8</a></li>
                       </ul>
                    </li>
                 </ul>
             </li>
        </ul>

JSFIDDLE: http://jsfiddle.net/5QBYW/2/

于 2013-03-29T09:13:41.750 に答える
0

あなたの HTML は少し奇妙です。あなたはあなたを閉じてli、新しいリストを完全に作成しています。それは、ネストされたリストが機能する方法ではありません。マークアップは次のようになります。

HTML

<ul class="tree" id="tree">
    <li>1
        <ul>
            <li><a href="?character=?">2</a>

            </li>
            <li><a href="?character=?">3</a>

                <ul>
                    <li><a href="?character=?">4</a>

                    </li>
                    <li><a href="?character=?">5</a>

                    </li>
                </ul>
            </li>
            <li><a href="?character=?">6</a>

                <ul>
                    <li><a href="?character=?">7</a>

                    </li>
                    <li><a href="?character=?">8</a>

                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

その後、通常の CSSul > li:last-childが機能します。

于 2013-03-29T09:20:39.063 に答える
0

これはうまくいくはずだと思います。これを試して。

<script type="text/javascript">
   $(document).ready(function () {
        $("#tree li:not(:has(li)").last().addClass("last");
   });
  </script>
于 2013-03-29T09:20:56.730 に答える
0

やってみました ??

$('ul > li:last-child').addClass("last");

またはあなたができる

$('ul li').last().addClass("last");
于 2013-03-29T09:07:28.600 に答える
0

あなたはそれを使用してそれを行うことができます>:

$('ul > li:last-child').addClass('last');

.last()または、次のように jQuery メソッドを使用できます。

$('ul li').last().addClass('last');

@ashleyの回答と同様に、last-of-type を参照してください。これは機能します:

$('ul > li:last-of-type').addClass('last');
于 2013-03-29T09:07:59.040 に答える
0
$('ul > li:last-child').addClass("last");

ul の子要素を考慮する必要があります

于 2013-03-29T09:09:29.463 に答える
0

HTMLをに変更します

<ul class="tree" id="tree">
<li>1</li>
<li>
    <ul>
        <li><a href="?character=?">2</a></li>
        <li><a href="?character=?">3</a></li>
        <li>
            <ul>
                <li><a href="?character=?">4</a></li>
                <li><a href="?character=?">5</a></li>
             </ul>
        </li>
        <li><a href="?character=?">6</a></li>
        <li>
            <ul>
                <li><a href="?character=?">7</a></li>
                <li><a href="?character=?">8</a></li>
            </ul>
        </li>
    </ul>
</li>
</ul>

JS

$("ul").each(function(){
$(this).find('li:last-child').addClass("last");
}); 

しかし、ここでは望ましい結果 (1,5,6,8 の選択) は発生しません。すべての順不同リストの最後のリスト項目のみを選択します

于 2013-03-29T09:15:52.537 に答える