jQuery - обход скрытых элементов li - PullRequest
2 голосов
/ 17 июня 2011

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

У меня есть ul со списком образцов цвета. Затем я фильтрую их, показывая и скрывая. При наведении курсора на один образец мне нужно изменить класс следующего видимого образца. Это достигается, пока я ничего не скрываю

$('+ li', this).toggleClass('swatchroll-sister');

Как это сделать

$(this).next().toggleClass('swatchroll-sister');

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

$('+ li:visible', this).next().toggleClass('swatchroll-sister');
$(this).next('li:visible').toggleClass('swatchroll-sister');
$('+ li', this).toggleClass('swatchroll-sister');
$('+ li', this).('item:visible').toggleClass('swatchroll-sister');

Так что мой вопрос, вероятно, "Где я могу поставить: Видимый селектор?" но может быть, это неправильный подход для начала? Спасибо за любые указатели.

1 Ответ

3 голосов
/ 17 июня 2011

Не видя вашего точного кода, я могу только предложить что-то вроде:

$('li').click(
    function(){
        var i = $(this).index('li:visible');
        var nextVisible = $(this).closest('ul').find('li:visible').eq(i+1);
        $(nextVisible).addClass('classNameToAdd');
    });

JS Fiddle demo .

Обратите внимание, что селектор передан в index()метод, который находит индекс текущего элемента среди элементов, возвращаемых селектором, в этом случае li:visible.

Ссылки:

...