Поместите класс в каждый элемент списка в третьей строке с помощью фильтрации jQuery. - PullRequest
Новая
       17

Поместите класс в каждый элемент списка в третьей строке с помощью фильтрации jQuery.

1 голос
/ 23 июля 2011

У меня есть медиа галерея. По какой-то странной причине дизайнер решил поместить эти элементы мультимедиа в блоки по 12. Три строки, четыре элемента в строке, а затем пробел.

Теперь мне не хочется помещать список из 12 элементов в родительский список на блок. Я думал, что это может быть легко обработано фильтрацией jQuery, добавив класс на каждом пункт каждого третьего ряда.

Я знаю, как настроить таргетинг на каждый :nth(4) элемент, каждый четвертый элемент в списке, но как мне сделать каждый элемент в третьей строке?

Какой фильтр можно использовать для чего-то подобного?

Разметка указана ниже. Все элементы являются просто плавающими элементами в неупорядоченном списке. 

<ul>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
</ul>

Плавающий, и четыре элемента помещаются в строке. Так что мне нужно было бы нацелиться на пункты 9, 10, 11 и 12, а также на три строки дальше, на пункты 21, 22, 23, 24 и снова ...

Я думал, что смогу сделать это с каким-нибудь изящным вычислением в .filter(function(){});, но я еще даже не близок к правильному ответу ...

То, что я хочу получить, на самом деле видно в этом jsfiddle, который я только что сделал: http://jsfiddle.net/DpMRc/5/**

Я хочу нацелить синие прямоугольники с помощью функции .filter() вместо того, чтобы писать для нее весь цикл for.

Ответы [ 4 ]

2 голосов
/ 23 июля 2011

Один из вариантов: 

$('tbody tr').filter(
    function(i){
        if ((i+1)%3 == 0){
            return this;
        }
    }).addClass('black');

JS Fiddle demo .

А затем используйте класс элемента tr, чтобы каким-то образом стилизовать дочерние элементы.: 

.black td {
    /* css for the td elements that are children of the tr with the class of 'black' */
}

Или вы можете использовать: 

$('tbody tr').filter(
    function(i){
        if ((i+1)%3 == 0){
            return this;
        }
    }).children().addClass('black');

JS Fiddle demo .

0 голосов
/ 24 июля 2011

Я предполагаю, что вы используете jQuery, потому что вам нужна поддержка IE8, но во всех других браузерах (включая IE9) вы можете сделать это только с помощью CSS: 

li:nth-child(12n+9), li:nth-child(12n+10), li:nth-child(12n+11), li:nth-child(12n+12) {
    border-bottom: 4px solid red;
}

Вот рабочий пример , я предположил, как будет выглядеть упрощенная версия остальной части вашего CSS. Те же самые селекторы будут работать в jQuery, если вы хотите заполнить поли для IE, но я бы посоветовал вам сделать это в условных комментариях, чтобы не тратить время на другие браузеры.

0 голосов
/ 23 июля 2011

Вы можете использовать eq ().например 

$('table tr:eq(3) td:nth-child(6)').each(function() {
    $(this).css('background-color', 'yellow')
});

выбирает 6-й «тд» третьего ряда.Вы можете объединить это с некоторой логикой, чтобы вычислить индекс для eq, чтобы выбрать каждую третью строку

fiddle: http://jsfiddle.net/u2Ru3/

0 голосов
/ 23 июля 2011

Вы можете использовать * в селекторе? Или конкретный тег? 

$('table tr:nth-child(3) > *')....

или 

$('table tr:nth-child(3) > td')...

зависит от того, хотите ли вы обратиться к прямому потомку или ко всем потомкам, в этом случае удалите символ >.

...