时间戳

首页 > 解决方案 > 使用 jQuery 获取嵌套列表中的上一个立即 li 项

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

问题描述

获取嵌套列表中的上一个 li 项

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

这就是我的意思。

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

  1. 以前的 li 没有嵌套，所以它只是$(selector).prev('li')
  2. 前一个 li 是嵌套的，所以得到最后一个 li$(selector).prev('li').find('li').last()
  3. 以前的李是父母所以$(selector).closest('ol').parent()
  4. 没有上一个 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>

标签： javascripthtmljquerylist

解决方案

您可以在页面上制作所有跨度的集合。单击跨度时，在集合中找到该跨度的索引，然后在集合中引用该索引index - 1以获取上一个：

const spans = [...document.querySelectorAll('span')];

spans.forEach((span, i) => {
  span.addEventListener('click', (e) => {
    console.log(spans[i - 1]);
  });
});
<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>

spans[i - 1]给你<span>，当然。如果要导航到它的包含<li>，请检查跨度是否存在，如果存在，请执行.closest('li').

推荐阅读