使用javascript遍历html嵌套列表
我有一个HTML列表(<ul>、<li>等)页，具有多个项目在不同的深度。我正在尝试编写一些代码来遍历这个列表，每次只遍历一个元素。因此，"next“按钮将返回以下<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 — or rather had — 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“链接，以同样的方式处理这个列表，但顺序相反。
几周前，我曾在devshed上问过同样的问题，但没有得到任何答复。
谢谢大家的回答。
忍者，我已经成功地实现了你的梦想。现在，我可以很好地在嵌套列表中上下导航。
还有一个问题，如果你愿意的话:我需要在树中的某个点开始“位置”的能力。用户可以通过散列(例如#post9)在树中选择一个节点--他们可以单击列表中的任何一个节点来选择它，或者他们可以书签url，这将包括该节点自己的散列。
因此，我的进一步问题是:如何使用URL中的散列来定位树中的节点并获取它的位置？URL中的散列与li节点的id相关。
回答 3
Stack Overflow用户
发布于 2011-08-13 19:09:48
由于您已经在使用jQuery，所以最好利用它内置的DOM遍历机制。在这种情况下，您将主要关心$().find和$().eq。
$().find
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);
}祝好运!
Stack Overflow用户
发布于 2011-08-13 18:35:51
我相信这是可行的：
function nextNode(selectedNode) {
var nextNode = selectedNode.next("li");
if (nextNode.length) {
return nextNode;
}
return nextNode.closest("li").next();
}这样做的是接受选定的节点，并返回下一个节点，如果它有一个。如果没有，则搜索最接近的父标记li标记，并从他获取下一个节点。
Stack Overflow用户
发布于 2011-08-13 19:20:37
https://stackoverflow.com/questions/7052414
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号