Question

具有如下结构：

<div class="tree">
   <div class="item" />
   <div class="item" />
   <div class="item" />
   <div class="item" />
   <div class="group">
      <div class="item" />
      <div class="item" />
      <div class="item" />
   </div>
   <div class="item" />
   <div class="group">
      <div class="item" />
      <div class="item selected" />
      <div class="item" />
      <div class="item" />
   </div>
   <div class="group">
      <div class="item" />
      <div class="item" />
   </div>
</div>

我希望能够转到这三个中的下一个和上一个项目。我有以下js

//to go up
var currentSelected = $(".item.selected");
currentSelected.removeClass("selected");
currentSelected.prevAll(".item:first").addClass("selected");

//to go down
var currentSelected = $(".item.selected");
currentSelected.removeClass("selected");
currentSelected.nextAll(".item:first").addClass("selected");

但是，这不适用于各组，如果我上去并且当前处于组的第一项，我想选择该组之前的项，或者选择当前项之前的组的最后一项组。反之亦然。

有什么建议吗？

Answer 1

最好是从jQuery集合中找到下一个/上一个项目：

var $items = $('.item');

然后应该在它们上循环以找到当前选定的索引，并基于该索引移至要查找的项目：

$items.each(function(index) {
    var $item = $(this);

    if ($item.hasClass('selected')) {
       $item.removeClass('selected');

       var $nextItem = $items.eq(index + 1); // to select the next one

       $nextItem.addClass('selected');
    }
});

jQuery在树中查找下一个/上一个

1 个答案: