jquery - 我如何定位 jquery 或 css 中的下一个或同级元素？

Question

我在尝试定位 men 中的下一个元素时遇到问题。

假设我们有这样的结构:

<ul>
 <li class="active">
    <a href=""><i class=""></i></a>
 </li>
 <li>
    <a href=""><i class=""></i></a>
 </li>
</ul>

我的目标是为每个“i”或当前事件 li 旁边的元素提供动画。

我还需要更改其颜色，或添加闪烁效果以帮助用户了解他们可以单击该元素。这是因为它是一个图标，也许他们看不到它...

我尝试了什么:

我尝试在 css 中使用 +、~，在 jquery 中使用 .next()、nextAll() 等。

编辑:下面给出的示例与此处显示的简单结构配合得很好，非常感谢您的帮助。

但是对于 bootstrap 4 选项卡，事件类位于元素中，因此结构变为

<ul>
  <li>
   <a href="" class="active"><i class=""></i></a>
  </li>
  <li>
    <a href=""><i class=""></i></a>
   </li>
</ul>

对于这种新结构，无论我尝试什么，我都无法更改颜色或为事件类之后的动画设置动画...(第二个 li)

Answer 1

我想你正在寻找这个:

li.active ~ li > a {
color:red;
}
li.active ~ li > a >i {
color:green;
}

<ul>
<li><a href=""><i class="">icon</i>link</a></li>
<li class="active"><a href=""><i class="">icon</i>link active</a></li>
<li><a href=""><i class="">icon</i>link</a></li>
<li><a href=""><i class="">icon</i>link</a></li>
<li><a href=""><i class="">icon</i>link</a></li>
</ul>

或者可能是这样:

li.active + li > a {
color:red;
}
li.active + li > a >i {
color:green;
}

<ul>
<li><a href=""><i class="">icon</i>link</a></li>
<li class="active"><a href=""><i class="">icon</i>link active</a></li>
<li><a href=""><i class="">icon</i>link</a></li>
<li><a href=""><i class="">icon</i>link</a></li>
<li><a href=""><i class="">icon</i>link</a></li>
</ul>