Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Выбор элемента :visible (https://javascript.ru/forum/dom-window/44188-vybor-ehlementa-visible.html)

dikucher 10.01.2014 13:55

Выбор элемента :visible
 
Пациент
После каждого ряда "блоков с картинкой", идет пунктирная линия. Ее я реализовал через добавления класса ( который в свою очередь добавляет псевдоэлемент) к первому "блоку с картинкой" и к каждому 4n+5. Вывод блоков меняется в зависимости от выбранного фильтра ( сверху: Квартиры Котеджы ...) поэтому, мне после нажатия на фильтр надо заново переопределить первый и 4n+5 элементы.
первый определятеся корректно
$('.items-bl li:visible:first')

Мне нужно определить из видимых "блоков с картинкой" 4n+5, это я делают следующим образом
$('.items-bl li:visible:nth-child(4n + 5)')

НО 4n+5 он считает не из видимых элементов, а из всех элементов.
Как мне выбрать 4n+5 именно из видимых элементов ?

melky 10.01.2014 14:11

Попробуй так:
$('.items-bl li:visible').filter(':nth-child(4n + 5)')

dikucher 10.01.2014 14:32

проблема остаётся, ведет себя так же

dikucher 10.01.2014 14:34

На сколько я понял, работает следующая логика
Выбираются элементы 4n+5, и если они visible, то селектор срабатывает
повторюсь, мне надо
чтобы сначала выбрало visible элементы, и уже в них рассчитало 4n+5

melky 10.01.2014 16:15

Цитата:

Сообщение от dikucher (Сообщение 291431)
На сколько я понял, работает следующая логика
Выбираются элементы 4n+5, и если они visible, то селектор срабатывает
повторюсь, мне надо
чтобы сначала выбрало visible элементы, и уже в них рассчитало 4n+5

не

он выбирает :visible, потом из них выбирает 4n+5

проблема в том, что он в "n" учитывает скрытые - т.е. в n индекс относительно дерева, а не коллекции

решение - callback.

я попробовал так :
http://jsbin.com/ImeWoRiT/1

dikucher 10.01.2014 17:32

вот как я изменил код ( срабатывает при клике на любую кнопку из фильтра ) посмотреть там же тест
jQuery(function ($) {
        var hide = $('.filter');

        var collection = $('.items-bl li');

        hide.click(function () {
            collection.removeClass('line');
            collection.filter(':visible').filter(function (index) {
                var isMatching = index && index % 4 === 0;
                return isMatching;
            }).add(collection.last()).addClass('line');
        });



        collection.removeClass('line').filter(':nth-child(4n+5), :first').addClass('line');

    });


но что то идет не так

melky 10.01.2014 20:29

обрати внимание на css по моей ссылке

kostyanet 11.01.2014 04:40

Точно, пациент. Миленький транзистор. Лучше бы починили fancybox или как он там, который бедолага не масштабируется и демонстрирует еще более прелестные полосы прокрутки вокруг оконца с фоткой.

Ответ, конечно, не по существу, но я предлагаю поменять существо с ковыряния в жикверях на дизайн, масштабируемость и все такое. Потому что эти пунктиры ну вообще там никуда. Это я как дизайнер вам говорю.

melky 11.01.2014 16:03

Цитата:

Сообщение от kostyanet (Сообщение 291572)
Точно, пациент. Миленький транзистор. Лучше бы починили fancybox или как он там, который бедолага не масштабируется и демонстрирует еще более прелестные полосы прокрутки вокруг оконца с фоткой.

Ответ, конечно, не по существу, но я предлагаю поменять существо с ковыряния в жикверях на дизайн, масштабируемость и все такое. Потому что эти пунктиры ну вообще там никуда. Это я как дизайнер вам говорю.

от программиста требуется сверстать и оживить то, что нарисовал дизайнер.

правка программистом конечного варианта дизайна строго карается.

так то, ясный красный, они там не к месту

dikucher 14.01.2014 19:20

не суть, к месту эти линии там или нет. Нарисовали - значит нужно делать.
melky у меня проблема в следующем, ( я хоть и изменил немного ваш код, но вроде не поломал его логики ). Но он зараза по прежнему определят мне 4n+5 из всех элементов, а ведь должен определять этот 4n+5 из видимых
jQuery(function ($) {
        var hide = $('.filter');

        var collection = $('.items-bl li');

        hide.click(function () {
            collection.removeClass('line');
            collection.filter(':visible').filter(function (index) {
                var isMatching = index && index % 4 === 0;
                return isMatching;
            }).add(collection.last()).addClass('line');
        });



        collection.removeClass('line').filter(':nth-child(4n+5)').addClass('line');

    });


верстка лежит все там же


Часовой пояс GMT +3, время: 21:31.