jQuery - 遍历隐藏的 li 元素

Posted 2023-05-09

【中文标题】jQuery - 遍历隐藏的 li 元素

【英文标题】：jQuery - Traversing hidden li elements

【发布时间】：2011-09-17 07:58:29

【问题描述】：

我是一个完全的 jQuery 新手（好吧，Web 编码新手来了），我很高兴你能如此轻松地做到这一点。不过，我完全坚持这一点，如果有任何帮助，我将不胜感激。

我有一个带有颜色样本列表的 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 选择器放在哪里？”但也许这是错误的开始方法？感谢您的任何指点。

【问题讨论】：

你能发一个JS Fiddle demo吗？

【参考方案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()。

【讨论】：

谢谢你，大卫 - 成功了！我实际上对此感到非常高兴，因为这不是我错过的愚蠢行为。我不会在一百万年内做到这一点，但可以遵循逻辑。我可能刚刚学到了大约 10 件事。干杯。

如果这解决了您的问题，我当然感谢您接受这个答案（使用左边的票数下方的勾号）。如果您还有其他需要帮助的信息（与上述问题相关），请随时发表评论。 :)