javascript - 使用javascript遍历html嵌套列表

Question

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

这里是一些示例 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 列表的深度可以是无限的，因此可能需要某种递归？这是我的技能所能达到的极限。我什至还没有开始考虑“上一个”链接，以相同的方式但以相反的顺序处理此列表。

我(几周前)在 devshed 上问过同样的问题，但没有得到回复。

---

谢谢大家的回答。

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

如果您愿意的话，还有一个问题:我需要能够在树中的某个点开始“位置”。用户可以通过散列(例如#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');

$().eq

实际上，您现在有几个选项可以访问那些单独的 li 元素。 jQuery 是一种类似数组的结构，这意味着您可以通过索引访问每个元素。 但是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);
}

祝你好运!