JQuery - Выбрать все, кроме последнего списка (из нескольких списков.) - PullRequest
Новая
       31

JQuery - Выбрать все, кроме последнего списка (из нескольких списков.)

4 голосов
/ 21 июня 2010

Мне интересно, это самый элегантный и эффективный способ сделать это?

У меня есть несколько списков тегов, и с помощью 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.

Ответы [ 2 ]

8 голосов
/ 21 июня 2010

:last не работает в этом контексте, потому что он будет соответствовать только одному элементу, а именно last .

last-child может соответствовать нескольким элементам, по одному для каждого родителя.

Ваш код выглядит довольно хорошо, использование .not () вместо запросов с sizzle может немного улучшить производительность. 

$('ul.tagList').children().not(':last-child').append(',');
1 голос
/ 31 июля 2013

Это было опубликовано давным-давно, но я подумал, что было бы хорошо опубликовать это для кого-либо еще (например, меня), который рассматривает этот пост как ссылку.Я сделал jsPerf для двух указанных выше случаев плюс один, который добавил сам, используя .prevAll () 

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

Это немного быстрее

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

...