Question

我有以下列表：

<ul>
    <li class="item">One</li>
    <li class="item">Two</li>
    <li class="item">Three
        <ul>
            <li class="item">Something Original</li>
            <li class="item selected">Something</li>
        </ul>
    </li>
    <li>Four 
        <ul>
            <li class="item">I want this selected next</li>
            <li class="item">Good</li>
        </ul>
    </li>
</ul>

使用jQuery，如何找到li的下一个class="item"，因为它包含在不同的容器中。显然我不能做$(".selected").next(".item")所以我怎么办呢？

JSFiddle：http://jsfiddle.net/q3f6v7zz/

Answer 1

由于li元素是嵌套的，并且您知道您希望下一个具有特定类的li，您可以使用.index()并执行类似的操作

var $li = $('.item'); // <--- get the list of all lis with class .item
var index = $li.index($('.selected')); // <--- find the index of the one with .selected amongst all the lis
console.log($li.eq(index+1).html()); // <--- index+1 because you need the next appearing li after selected

如果你想在keydown上移动选定的类，那么应该这样做

var $li = $('.item');
$(document).on('keydown', function(e) {
  if (e.keyCode == 40) {
    var index = $li.index($('.selected'));
    $li.eq(index).removeClass('selected');
    index = (index+1) % $li.length; // <--- to rotate the values from 0 to count of li.item elements
    $li.eq(index).addClass('selected');
  }
});

＆＃13;

var $li = $('.item');

$(document).on('keydown', function(e) {
  if (e.keyCode == 40) {
    var index = $li.index($('.selected'));
    $li.eq(index).removeClass('selected');
    index = (index+1) % $li.length;
    $li.eq(index).addClass('selected');
  }
});

＆＃13;

.selected {
  background: green;
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
  <li class="item">One</li>
  <li class="item">Two</li>
  <li>Three
    <ul>
      <li class="item">Something</li>
      <li class="item selected">Something Else</li>
    </ul>
  </li>
  <li>Four
    <ul>
      <li class="item">I want this selected next</li>
      <li class="item">Good</li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

不确定您的确切需求，但可以使用$(Element").parent().parent().find("li");

换句话说，.parent()可能就是您要找的内容，.sibling()也可以$('li').closest('ul').find('li')找到，或者您可能需要var myLis = document.getElementsByTagName('li'); var wantedIndex; for(var i = 0;i<myLis.length; i++){ if(myLis[i].className === "active"){ wantedIndex = i+1; //gets the li which is next when selecting all lis } } 这将在树上找到最接近你正在寻找的ul https://api.jquery.com/closest/

您也可以使用：

Vanilla JS做一些类似于其他人用$ index讨论过的东西，如果它对你更有意义：同样，这并不是有效的，但这基本上就是JQuery正在做的事情：

10:131186;

Answer 3

您可以在所有li s内获取所选元素的索引，然后递增该索引以获取下一个索引。

$("ul").on("click", "li.item.selected", function() {
  var all_li = $("li.item");
  var selected_index = all_li.index(this);
  var next_li = all_li.eq((selected_index + 1) % all_li.length);
  $(this).removeClass("selected");
  next_li.addClass("selected");
});

.item.selected {
  background-color: yellow;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="item">One</li>
  <li class="item">Two</li>
  <li class="item">Three
    <ul>
      <li class="item selected">Something</li>
    </ul>
  </li>
  <li>Four
    <ul>
      <li class="item">I want this selected next</li>
      <li class="item">Good</li>
    </ul>
  </li>
</ul>

我使用了模数，所以它会在最后包裹。

下一个包含在不同UL中的子LI

3 个答案: