JQuery - 选择除最后一个列表之外的所有列表(从多个列表中。)

Question

我想知道这是否是最优雅、最有效的方法？

我有多个“标签”列表，通过 CSS，我希望标签内联显示(display: inline)并以逗号分隔。我面临的挑战是将逗号附加到每个 ul.tagList 中除最后一个列表项之外的所有列表项:

 <ul class="outerList">
    <li>
        <div class="innerContainer">
            <ul class="tagList">
                <li>Tag A</li>
                <li>Tag B</li>
                <li>Tag C</li>
            </ul>
        </div>
    </li>
    <li>
        <div class="innerContainer">
            <ul class="tagList">
                <li>Tag D</li>
                <li>Tag E</li>
                <li>Tag F</li>
            </ul>
        </div>
    </li>
 </ul>

要在所有 ul.tagList 列表项上附加逗号，但最后一个，我使用:

 $('ul.tagList').children(':not(:last-child)').append(',');

这会产生:

Tag A, Tag B, Tag C

Tag D, Tag E, Tag F

这是最好的方法吗？

另外，为什么在这种情况下 :not(:last-child) 有效，但 :not(:last) 不起作用？

非常感谢您的帮助和解释。

普雷博。

Answer 1

:last 在此上下文中不起作用，因为它只会匹配一个元素，即last。

last-child 可以匹配更多元素，每个父元素一个。

您的代码看起来相当不错，使用 .not()而不是使用 sizzle 查询可能会稍微提高性能。

$('ul.tagList').children().not(':last-child').append(',');