jQuery - 遍历隐藏的 li 元素

Question

我是一个 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');

所以我的问题可能是“我应该把 :Visible 选择器放在哪里？”但也许这就是错误的开始方式？感谢您的指点。

Answer 1

没有看到你的确切代码，我只能建议如下:

$('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.

引用文献:

• index() .
• eq() .