Question

我有一个页面的HTML列表（<ul>，<li>等），其中包含不同深度的多个项目。我正在尝试编写一些代码来一次遍历此列表中的一个元素。因此，“下一个”按钮将返回以下<li>元素的ID，该元素可能是当前元素的直接兄弟，或者它将位于子<ul>元素中，或者它可能位于父<ul>元素。同样，“上一步”按钮会做同样的事情，但反之亦然。

以下是一些示例html：

<ul>
  <li id="post_item_1"><a href="#post1">Vestibulum ultrices, ante non tincidunt molestie, purus enim varius urna, nec bibendum...</a>

   <ul>
   <li id="post_item_26"><a href="#post26">This planet has &mdash; or rather had &mdash; a problem, which was this: most of...</a>

    <ul>
    <li id="post_item_27"><a href="#post27">A towel, it says, is about the most massively useful thing an interstellar hitch...</a>
    </li>
   </ul>

   </li>
  </ul>
  </li>
  <li id="post_item_2"><a href="#post2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec velit augue,...</a>

   <ul>
   <li id="post_item_58"><a href="#post58">Reply to first post, with an edit</a>
   </li>

   <li id="post_item_59"><a href="#post59">Another reply to first post, made after the first reply</a>
   </li>
  </ul>
  </li>
  <li id="post_item_4"><a href="#post4">Phasellus vitae est tellus, vel aliquam lectus. Cras augue tellus, pulvinar a blandit...</a>

   <ul>
   <li id="post_item_60"><a href="#post60">Reply to second post</a>

   </li>
  </ul>
  </li>
  <li id="post_item_3"><a href="#post3">Pellentesque consequat urna mauris, luctus adipiscing enim. Sed quis lectus vel...</a>
  </li>
  <li id="post_item_28"><a href="#post28">"The Babel fish" said The Hitchhiker's Guide to the Galaxy quietly, "is small, yellow...</a>

  </li>
  <li id="post_item_61"><a href="#post61">Hello there, it is very worrying</a>

   <ul>
   <li id="post_item_62"><a href="#post62">Don't be scared, or scarred, or sacred, or Skesis!</a>
   </li>
  </ul>
  </li>

  <li id="post_item_67"><a href="#post67">Well, to be fair, at the end of the day, when all is said and done, I'd like to...</a>
  </li>
</ul>

我玩了几个小时的jquery，这就是我所拥有的：

if (!node) {
// start with the selected node
node = $('#content #postNavigator ul li.selected')
}   


if ( $(node).has('ul').length ) {
    // has child <ul> 
nextNode = $($(node).children()[1]).children()[0];      
} 
else {
// has a sibling
if ($(node).next('li').length) {
    nextNode = $(node).next('li');
}
else {  

    // recursion needed here - this code will return parent, but only when 1 level deep.
    if ($(node).parent().parent().next('li').length) {
        nextNode = $(node).parent().parent().next('li');
    }
    else {          
        return false;
        }
    }               
}

上面将返回下一个节点，如果有一个子节点，则返回子节点，如果没有兄弟节点或子节点，则返回父节点，但只返回一个级别。 HTML列表可以是无限深度的，因此可能需要某种递归？这是我的技能可以带我的。我甚至没有开始考虑“prev”链接，以相同的方式处理此列表，但顺序相反。

我在发布时（几周前）也问了同样的问题，但没有回复。

谢谢大家的回答。

忍者，我已经实现了你的成功。我现在可以很好地在我的嵌套列表中上下导航。

另一个问题，如果你会如此善良：我需要能够在树内的某个点开始“位置”。用户可以通过散列（例如＃post9）在树中选择一个节点 - 他们可以单击列表中任意位置的节点来选择它，或者他们可以为url添加书签，其中包括该节点自己的散列。

所以我的进一步问题是：如何使用URL中的哈希在树中找到一个节点并获取它的位置？ URL中的哈希值与li节点的id相关联

Answer 1

由于您已经在使用jQuery，因此您可以利用其内置的DOM遍历机制。在这种情况下，您将主要关注$().find和$().eq。

$（）。找到

jQuery实际上可以找到任何其他选择器级别下面存在的每个匹配元素。这种方法将为您完成绝大部分工作。

// Returns a jQuery object containing every 'li' on the page
var items = $('body').find('li');

$（）。当量

现在你有几个选项可以访问这些单独的li元素。 jQuery是一个类似于Array的结构，这意味着可以通过索引访问每个元素。但是 jQuery还有一个内置的方法可以从集合中获取单个元素，它们也将作为jQuery对象返回。

// Good: Returns the first element from the jQuery collection as a JS DOMElement
items[0];

// Better: Returns the first element from the jQuery collection as a jQuery collection
items.eq(0);

把它放在一起

现在您已经拥有了这些工具，您只需要应用一些逻辑来从列表中的一个元素移动到下一个元素。这就是你真正需要的;我还将您的标记复制到jsFiddle项目中，并添加了一些功能来向您展示它是如何工作的：http://jsfiddle.net/ninjascript/Kt8f8/。

var items = $('body').find('li');
var length = items.length;
var position = -1;

function next() {
    position = (position + 1 < length) ? position + 1 : 0;
    return items.eq(position);
}

祝你好运！

Answer 2

我相信这会奏效：

    function nextNode(selectedNode) {
    var nextNode = selectedNode.next("li");
    if (nextNode.length) {
        return nextNode;
    }

    return nextNode.closest("li").next();
}

这样做是为了获取所选节点并返回下一个节点（如果有）。如果没有，它会搜索最近的父li标签并从中获取下一个节点。

Answer 3

如果您不想使用外部库，则需要使用组合 javascript document methods

和

dom element methods

祝你好运！

使用javascript遍历html嵌套列表

3 个答案:

$（）。找到

$（）。当量

把它放在一起