Question

我正在尝试创建键盘导航功能。

<li class="icon"></li>
<li class="icon open"></li>
<li class="icon"></li>
<li class="icon open active"></li>
<li class="icon"></li>
<li class="icon open"></li>

我想拥有它，以便按向左或向上箭头选择＆＃34; .open＆＃34;在＆＃34; .active＆＃34;之前列出项目右箭头或右箭头选择＆＃34; .open＆＃34;在＆＃34; .active＆＃34;

之后列出项目

我用这个：

var openArray = $('li.open');

构建一个返回此数组的数组：

<li class="icon open"></li>
<li class="icon open active"></li>
<li class="icon open"></li>

我的下一步是找到＆＃34; .active＆＃34;的索引。在openArray中列出项目，但那是我被困的地方。我无法弄清楚如何搜索选择器数组并返回其索引。我通读了.grep（）和.inArray（）以及.index（）和.find（）以及我能想到的所有内容（包括树遍历方法）的文档，但我无法得到它们的任意组合工作

之后的下一步是使用索引和.length导航数组。那部分没有问题，但我不知道＆＃39; .active＆＃39;索引。

有人可以帮忙吗？

Answer 1

您可以使用每个迭代数组并返回＆＃34; active＆＃34;的索引。元件

var openArray = $('li.open');

$(openArray).each(function( index ) {
    if ($(this).hasClass("active") ) {
        console.log("found" + " " + index);
        }

});

Answer 2

var active = $("li .active").eq(0);
active.parent().index( active );


   // Try this so:

var i = 0;
var index = -1;
arraySelector.each(function(){
     if ($(this).hasClass('active'))
     {
          index = i;
     }
     ++i;
});

这有用吗？：）

Answer 3

您需要使用.next()

var active = $('li.icon.open.active');
var prevIcon = active.next('.icon.open');

Answer 4

嗯，我尝试过这些建议，但要么我在最初的问题中没有明确问题，要么答案并不像人们想象的那么明显。我找到了一个解决方案，我就是这样做的：

不是将选择器转储到数组中而是担心搜索，我将它们的索引放在数组中

var openArray = [];
var activeIndex;
var i = 0;
$.each($('#tbul li.icon'), function(index, value) {
    if ($(this).hasClass('open')) {
        openArray.push(index);
        i++;
    }
    if ($(this).hasClass('active')) {
        activeIndex = i;
    }
}

使用这个我将所有打开的列表项转储到openArray中，并且我知道使用activeIndex在该数组中活动列表项的位置。

我希望有一个漂亮的jQuery解决方案（我确信它存在）但是现在这样做

搜索选择器数组并返回匹配索引

4 个答案: