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

由于某种原因，使用 CSSul: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: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

你有错误的<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 更改为

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