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

Posted 2023-03-05

【中文标题】如何在 jquery 或 css 中定位下一个或同级元素？

【英文标题】：How can I target next or sibling element in jquery or css?

【发布时间】：2018-08-10 17:58:06

【问题描述】：

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

假设我们有这样的结构：

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

我的目标是在当前活动 li 旁边的每个“i”或元素上制作动画。

我还需要改变它的颜色，或者添加一个闪烁效果来帮助用户理解他们可以点击元素。原因是它是一个图标，也许他们没有看到它......

我尝试了什么：

我尝试在 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）

【参考方案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>

【讨论】：

非常感谢，它帮助我理解，我会试试这个！！

【参考方案2】：

也许你用错了选择器？

这是一个实际的example

使用的css是：

// Targets the next one to active
li.active + li a  


// Targets next one and all after that, after active
li.active ~ li a 

【讨论】：

非常感谢，是的，我认为我做错了..！我会试试你的代码

【参考方案3】：

From CSS-tricks.com:

相邻的同级组合器选择器允许您选择直接在另一个特定元素之后的元素。

p + p  font-size: smaller; 
// Selects all paragraphs that follow another paragraph
#title + ul  margin-top: 0; 
// Selects an unordered list that directly follows the element with ID title

【讨论】：

非常感谢我尝试了 + 但没有成功..我会再试一次！

【参考方案4】：

我认为您想定位 li 具有“活动”类的子元素。

你可以这样做

li.active a 
    /*your style goes here*/

li.active i 
    /*your style goes here*/