时间戳

首页 > 解决方案 > jquery在树中查找下一个/上一个

javascript - jquery在树中查找下一个/上一个

问题描述

给定如下结构：

<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");

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

有什么建议么？

标签： javascriptjquery

解决方案

最好从 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');
    }
});

推荐阅读