循环遍历元素直到在 jQuery 中找到匹配项答案

【问题标题】：Loop over elements until match found in jQuery循环遍历元素直到在 jQuery 中找到匹配项
【发布时间】：2011-12-08 08:21:06
【问题描述】：

我有一系列li 项目，需要最有效的方法来循环它们并返回索引。我需要交叉检查li 的类，如果它有某个类，则不返回索引。

这基本上是针对具有键盘支持的应用程序样式菜单。本质上，请考虑以下标记：

<ul>
    <li class="selected">First Item</li>
    <li class="disabled">Second Item</li>
    <li class="separator">Third Item</li>
    <li>Fourth Item</li>
</ul>

我想要一个函数，可以用来循环遍历li 元素，并返回下一个索引（selected 的类将应用于下一个可选项）。目前，我正在循环并简单地检查li 是否具有separator 的类，如果有，则增加索引并返回它。

但是，在上面的例子中，函数应该返回3，因为不能选择类为disabled 或separator 的任何项目。

谁能提供一些关于如何使用 jQuery 实现这一点的建议？我在想有可能做这样的事情：

function get_next_index()
{
    var current_index = $('ul li.selected');
    var index = $('ul li:gt(' + current_index + ')').not('.disabled').not('.separator').get(0).index();
    if(!index || index < current_index)
    {
        return -1;
    }
    else
    {
        return index;
    }
}

【问题讨论】：

标签： javascript jquery loops

【解决方案1】：

这样的事情应该可以工作：

alert($("li:not(.disabled,.separator)").index());

您可以在这里看到它的实际效果：

http://jsfiddle.net/Zf9Vv/

我对你的问题有点困惑，所以如果我有任何问题，请告诉我。我建议阅读 index 方法，看看它是否符合您的预期。

【讨论】：

【解决方案2】：

$('li').each(function () {

  if (! $(this).hasClass('disabled'))
  {
    // code for non-disabled li goes here
  }

});

我认为这基本上就是您所要求的。不确定您所说的“返回索引”是什么意思 - 您是否只想为所有没有“禁用”类的项目创建一个索引数组？

【讨论】：

【解决方案3】：

我的贡献：

$("li.selected").nextAll(":not(.disabled,.separator)").first().index();

这会获取所有后续兄弟，过滤掉.disabled 和.separator，并返回第一个的索引。

【讨论】：