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(',');

这会产生：

标签A，标签B，标签C

标签D，标签E，标签F

这是最好的方法吗？

为什么：not（：last-child）工作但在此上下文中不是：not（：last）？

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

Prembo。

Answer 1

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

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

您的代码看起来很不错，使用.not()代替使用sizzle进行查询可能会略微提高性能。

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

Answer 2

这是很久以前发布的，但我认为发帖给其他人（比如我）看这篇文章作为参考很好。我为上述两种情况制作了一个jsPerf加上一个我自己使用.prevAll（）

$('.tagList').children(':last-child').prevAll().css('background-color', 'yellow');

稍快一点

http://jsperf.com/all-but-last-performance

JQuery - 选择除最后列表之外的所有列表（来自多个列表。）

2 个答案: