如果我有一个嵌套列表，并且我想使用 jQuery 或 Javascript 从选择器获取列表中的前一项。问题是，这是一个嵌套列表，因此前一个项目可能是另一个 ol 的嵌套列表项目。
这就是我的意思。
- 之前的 jQuery
#('#topic_17')是 Django#('#topic_2') - Django
#('#topic_2')之前的版本是 Bootstrap 4#('#topic_11') - Bootstrap 4 之前的版本
#('#topic_11')是框架#('#topic_3') - 之前的框架
#('#topic_3')是 CSS#('#topic_5') - CSS
#('#topic_5')之前是 HTML#('#topic_1') - HTML
#('#topic_1')之前是 Web 开发#('#topic_13') - 在 Web 开发之前，
#('#topic_13')没什么意义。
我看到了一些可能的方法，但真的想要一种更智能、更通用的方法来选择是否可能。之前我能想到的元素情况:
- 前面的 li 没有嵌套，所以它只是
$(selector).prev('li') - 前一个 li 是嵌套的，因此使用
$(selector).prev('li').find('li').last() 获取最后一个 li
- 前面的 li 是父级，因此
$(selector).closest('ol').parent() - 没有前面的 li，因为它是列表中的顶部项目。
有什么通用的、简单的方法来完成这个任务吗？
HTML 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<ol class="list-group list-group-root sortable">
<li id="topic_13">
<div>
<div>
<span>Web Development</span>
</div>
</div>
<ol>
<li id="topic_1">
<div>
<div>
<span>HTML</span>
</div>
</div>
</li>
<li id="topic_5">
<div>
<div>
<span>CSS</span>
</div>
</div>
<ol>
<li id="topic_3">
<div>
<div>
<span>Frameworks</span>
</div>
</div>
<ol>
<li id="topic_11">
<div>
<div>
<span>Bootstrap 4</span>
</div>
</div>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
<li id="topic_2">
<div>
<div>
<span>Django</span>
</div>
</div>
</li>
<li id="topic_17">
<div>
<div>
<span>jQuery</span>
</div>
</div>
</li>
</ol>
</body>
</html>
最佳答案
一种方法是使用 .slice 过滤 jQuery 返回的匹配元素。请参阅此示例:
// Get all li elements
const elements = jQuery("li");
// select the element we need
const el = jQuery("#topic_11");
// get index of the element
const idx = elements.index(el);
// get previous by slicing from the previous index (-1)
const prevElement = elements.slice(idx - 1, idx);
if (prevElement.length == 0)
console.log("No Previous Element");
if (prevElement.length > 0)
console.log(prevElement[0], prevElement.attr("id"));<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol class="list-group list-group-root sortable">
<li id="topic_13">
<div>
<div>
<span>Web Development</span>
</div>
</div>
<ol>
<li id="topic_1">
<div>
<div>
<span>HTML</span>
</div>
</div>
</li>
<li id="topic_5">
<div>
<div>
<span>CSS</span>
</div>
</div>
<ol>
<li id="topic_3">
<div>
<div>
<span>Frameworks</span>
</div>
</div>
<ol>
<li id="topic_11">
<div>
<div>
<span>Bootstrap 4</span>
</div>
</div>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
<li id="topic_2">
<div>
<div>
<span>Django</span>
</div>
</div>
</li>
<li id="topic_17">
<div>
<div>
<span>jQuery</span>
</div>
</div>
</li>
</ol>关于javascript - 使用 jQuery 获取嵌套列表中的上一个直接 li 项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61834221/