Javascript 使用jQuery获取嵌套列表中的上一个立即li项_Javascript_Html_Jquery_List

Javascript 使用jQuery获取嵌套列表中的上一个立即li项

javascript html jquery list

Javascript 使用jQuery获取嵌套列表中的上一个立即li项,javascript,html,jquery,list,Javascript,Html,Jquery,List,如果我有一个嵌套列表，并且我想使用jQuery或Javascript从选择器获取列表中的前一项。问题是，这是一个嵌套列表，因此前一项可能是来自另一个ol的嵌套列表项这就是我的意思 jQuery（'topic_17'）前面是Django（'topic_2'） Django（'topic_2'）之前的版本将是Bootstrap 4（'topic_11'） Bootstrap 4之前的#（“#主题_11”）将是框架#（“#主题_3”）在框架之前（“#主题#3”）将是CSS（“#主题#5”） CS

如果我有一个嵌套列表，并且我想使用jQuery或Javascript从选择器获取列表中的前一项。问题是，这是一个嵌套列表，因此前一项可能是来自另一个ol的嵌套列表项

这就是我的意思

jQuery
```
（'topic_17'）
```
前面是Django
```
（'topic_2'）
```
Django
```
（'topic_2'）
```
之前的版本将是Bootstrap 4
```
（'topic_11'）
```

Bootstrap 4之前的

#（“#主题_11”）

将是框架

#（“#主题_3”）

在框架之前（“#主题#3”）将是CSS
```
（“#主题#5”）
```

CSS

#（“#主题_5”）

之前是HTML

#（“#主题_1”）

HTML
```
（'topic_1'）
```
之前是Web开发
```
（'topic_13'）
```
Web开发之前的
```
#（“#主题_13”）
```
将一事无成

我看到了一些可能的方法，但如果可能的话，我真的想要一种更聪明、更普遍的选择方法。我能想到的以前的元素情况：

前面的li不是嵌套的，所以它只是

$（选择器）。prev（'li'）

上一个li是嵌套的，因此使用

$（选择器）.prev（'li'）.find（'li'）.last（）获取最后一个li

上一个li是父级so

$（选择器）。最近（'ol'）。父级（）

没有以前的li，因为它是列表中的第一项

有什么通用的、简单的方法来实现这一点吗

HTML示例


标题

网络开发

HTML


CSS

框架

引导程序4





德扬戈


jQuery

您可以在页面上收集所有跨距。单击跨距时，在集合中查找该跨距的索引，然后在集合中引用

索引-1

，以获取上一个跨距：

const span=[…document.queryselectoral（'span'）；
span.forEach（（span，i）=>{
span.addEventListener（'单击'，（e）=>{
log（跨度[i-1]）；
});
});


网络开发

HTML


CSS

框架

引导程序4





德扬戈


jQuery

一种方法是使用.slice
过滤jQuery返回的匹配元素。请参见此示例：

//获取所有li元素
常量元素=jQuery（“li”）；
//选择我们需要的元素
const el=jQuery（“主题11”）；
//获取元素的索引
常数idx=元素索引（el）；
//通过从上一个索引（-1）切片获取上一个索引
const preveElement=elements.slice（idx-1，idx）；
如果（prevElement.length==0）
console.log（“没有以前的元素”）；
如果（prevElement.length>0）
log（preveElement[0]，preveElement.attr（“id”）


网络开发

HTML


CSS

框架

引导程序4





德扬戈


jQuery

非常干净的解决方案！谢谢你的帮助。我为这件事绞尽脑汁。
<!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>