Как добавить классы n-го элемента с помощью jQuery

Question

http://jsfiddle.net/JamesKyle/y7hBQ/

Я делаю простую функцию подсчета jquery, которая добавляет следующие классы:

1. Первый и последний
2. Четные и нечетные
3. nth-item- # (считается по порядку)
4. n-й элемент - # (считает в обратном направлении)

Первые два довольно легко, но вторые два доставляют мне неприятности, так как я новичок в jQuery / Javascript

Вы можете увидеть jsfiddle здесь: http://jsfiddle.net/JamesKyle/y7hBQ/

Это код, который я сейчас использую:

$(document).ready(function() {
    $('.count, ul').each(function() {

        var countChildren = $(this).children();

        $(countChildren).filter(':even').addClass('even');
        $(countChildren).filter(':odd').addClass('odd');
        $(countChildren).first().addClass('first');
        $(countChildren).last().addClass('last');

        var numberOfChildren = $(countChildren).size();

        // $(countChildren).addClass('nth-item-' + #);
        //                                        ⬆
        //                           Fill with the elements number

        // $(countChildren).addClass('nth-item--' + #);
        //                                         ⬆
        //                   Fill with the elements number (negative count)
    });
});

Я сосредотачиваюсь только на закомментированных строках

Опять вот jsfiddle: http://jsfiddle.net/JamesKyle/y7hBQ/

Спасибо заранее!

ОБНОВЛЕНИЕ:

У меня есть два решения ниже, я планирую использовать это в очень большом масштабе, так что, если бы вы могли порекомендовать, какой самый эффективный способ, это мне очень поможет! Спасибо !!

Answer 1

Редактировать: См. эту скрипку для чистого CSS решения.Не требует никакого JavaScript (используя селектор :nth-child).

Используйте метод .index(), чтобы получить индекс текущего элемента в коллекции элементов.Кроме того, поскольку .children() возвращает объект jQuery, нет необходимости заключать countChildren в $.

. Для пояснения приведенный ниже код использует индексы, начинающиеся с 1 и -1 (как намекает наКод CSS).

Демо: http://jsfiddle.net/y7hBQ/18/

$(document).ready(function() {
    $('.count, ul').each(function() {

        var countChildren = $(this).children();

        countChildren.filter(':even').addClass('even');
        countChildren.filter(':odd').addClass('odd');
        countChildren.first().addClass('first');
        countChildren.last().addClass('last');

        var numberOfChildren = countChildren.size();

        countChildren.each(function(i){
            var posindex = countChildren.index(this) + 1,
                         //^ This can be replaced by i + 1, for efficiency
                negindex = numberOfChildren - posindex + 1;
            $(this).addClass('nth-item-' + posindex)
                   .addClass('nth-item--' + negindex);
        });

    });
});

Answer 2

Если учитывается каждый результат, вы должны рассмотреть сокращение итераций;

$('.count, ul').each(function() {
    var $children = $(this).children(),
        count = $children.size(),
        $item;
    $children.each(function(i) {
        $item = $(this)
            .addClass(i % 2 === 0 ? 'even' : 'odd')
            .addClass('nth-item-' + (i + 1))
            .addClass('nth-item--' + (count - i));
        if (i === 0) {
            $item.addClass('first');
        }
        if (i == count - 1) {
            $item.addClass('last');
        }
    });
});

Таким образом, вы выполняете итерации для детей только один раз.Когда вы используете фильтры, он выполняет итерации и фильтрует элементы в соответствии с вашим фильтром. jsFiddle здесь .

Небольшой тест здесь .

Answer 3

Я думаю, что вы ищете:

var count = countChildren.length;
countChildren.each(function(index) { 
    $(this).addClass('nth-item-'+index);
           .addClass('nth-item--'+(count-1-index));
});

Возможно, есть более быстрый способ сделать это, но .... надеюсь, это сработает для вас.

Answer 4

Если я правильно понимаю, это:

$(document).ready(function() {
    $('.count, ul').each(function() {

        var countChildren = $(this).children();

        countChildren.filter(':even').addClass('even');
        countChildren.filter(':odd').addClass('odd');
        countChildren.first().addClass('first');
        countChildren.last().addClass('last');

        var numberOfChildren = countChildren.size();

        countChildren.each(function(i) {
            $(this).addClass('nth-item-'  + (i + 1) )
                   .addClass('nth-item--' + (numberOfChildren - i) );
        });
    });
});

jsFiddle