javascript - 确定嵌套 HTML 列表内相邻的 <li>

Question

我有一个嵌套列表。该列表中的一个元素包含一个名为“special”的类。该特定节点可以出现在嵌套列表中的任何位置。例如，

<ul id="mylist">
 <li>1</li>
 <li>2</li>
 <li>
    <ul>
        <li>3</li>
        <li class="special">4</li>
        <li>
           <ul>
              <li>5</li>
           </ul>
        </li>
    </ul>
 </li>
 <li>6</li>
</ul>

当我单击按钮时，我需要对特殊节点上方和下方的节点应用两个类，即“向上”和“向下”。因此，在上面的示例中，结果列表应如下所示:

<ul id="mylist">
 <li>1</li>
 <li>2</li>
 <li>
    <ul>
        <li class="up">3</li>
        <li class="special">4</li>
        <li>
           <ul>
              <li class="down">5</li>
           </ul>
        </li>
    </ul>
 </li>
 <li>6</li>
</ul>

正如你所看到的，因为我的列表是一个嵌套列表，并且特殊的 <li>节点可以出现在任何位置，因此有“上”和“下”<li>可能需要放置在其他一些<ul>内也是如此。

我的想法

1. 我最初的想法是进行 DOM 遍历，但很快就变得非常复杂。

2. 接下来我想我将创建一个包含所有 <li> 的数组在我的列表( $("#mylist").find ("li") )中，然后找出其中的哪些 <li>有“特殊”类( hasClass("special") )，一旦我知道出现“特殊”的数组索引，我将执行 +1, -1 来获取下部和上部节点。但我不知道该怎么做..

Answer 1

您可以使用.index()找出哪个 li 具有 .special。从那里，您可以使用您的想法#2:

var lis = $("#mylist").find ("li");
lis.eq(lis.index('.special')-1).addClass('up');
lis.eq(lis.index('.special')+1).addClass('down');