Question

我有一个像这样的结构列表：

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

哪个不起作用。任何帮助将不胜感激！

Answer 1

已选择<1,5> 6和8

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

http://jsfiddle.net/42v8A/

Answer 2

你尝试过吗？

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

或者你可以做

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

Answer 3

您可以使用>执行此操作：

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

或者你可以像这样使用.last() jQuery方法：

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

与@ashley一样，请参阅last-of-type，这样可行：

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

Answer 4

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

您需要考虑ul

的子元素

Answer 5

您的<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/

Answer 6

将您的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）不会发生。它仅选择每个无序列表中的最后一个列表项

Answer 7

你的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>

然后，您的普通CSS ul > li:last-child将起作用。

Answer 8

我认为这应该有效。试试这个。

<script type="text/javascript">
   $(document).ready(function () {
        $("#tree li:not(:has(li)").last().addClass("last");
   });
  </script>

jQuery为嵌套列表中的所有最后一个子类添加一个类

8 个答案:

HTML