jQuery向嵌套列表中的所有最后一个孩子添加一个类答案

【问题标题】：jQuery to add a class to all last childs in a nested listjQuery向嵌套列表中的所有最后一个孩子添加一个类
【发布时间】：2013-03-19 23:28:13
【问题描述】：

我的列表结构如下：

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

这没有用。任何帮助将不胜感激！

【问题讨论】：

标签： jquery list jquery-selectors nested css-selectors

【解决方案1】：

你试过了吗？？

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

或者你可以这样做

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

【讨论】：

我想知道 $('li').last() 是否不会只选择 DOM 中的最后一个 li...
这不会选择 1 或 6。
@JoDev 编辑 :) 再次错字。非常感谢。你救了我。
@hjpotter92 这是一个错字。JoDev 已经通知我。编辑了我的答案。
@Baadshah 即使那样也行不通。检查this 和this

【解决方案2】：

您可以使用> 来做到这一点：

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

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

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

就像@ashley 的回答一样，请参阅last-of-type，这会起作用：

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

【讨论】：

【解决方案3】：

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

需要考虑ul的子元素

【讨论】：

【解决方案4】：

你有错误的<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/

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

1、5、6、8已被选中

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

http://jsfiddle.net/42v8A/

【讨论】：

【解决方案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 将起作用。

【讨论】：

【解决方案8】：

我认为这应该可行。试试这个。

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

【讨论】：