在上述ul类的基础上给出li元素类

Give li elements class based on above ul class

本文关键字：li 元素 基础上 ul      更新时间：2023-09-26

我有一组li元素，我想给ul容器下面的所有li元素一个基于.login类的额外类。login元素不是父元素，而是在同一个容器中。这在jQuery或vanilla-js中可能吗？

 <ul class="submenu" id="sub0">
  <li class="menugroup dcjq-parent-li">
   <ul class="rightmenu login">
     <li><a href="/" title=""></a></li>
      <li><a href="/" title=""></a></li>
    </ul>
  </li>
   <li><a href="/"></a></li> <-----new class
   <li><a href="/"></a></li> <-----new class
   <li><a href="/"></a></li> <-----new class
    <li><a href="/"></a></li> <-----new class
    <li><a href="/"></a></li> <-----new class
    <li><a href="/"></a></li> <-----new class
 </ul>

您可以使用以下代码：

$("ul.login")
.parents("li")//get ancestor li element
.nextAll()//get all next li elements
.addClass("active");//add desire class
.active {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="submenu" id="sub0">
  <li class="menugroup dcjq-parent-li">
    <ul class="rightmenu login">
      <li>
        <a href="/" title=""></a>
      </li>
      <li>
        <a href="/" title=""></a>
      </li>
    </ul>
  </li>
  <li>
    <a href="/"></a>
  </li>
  <li>
    <a href="/"></a>
  </li>
  <li>
    <a href="/"></a>
  </li>
  <li>
    <a href="/"></a>
  </li>
  <li>
    <a href="/"></a>
  </li>
  <li>
    <a href="/"></a>
  </li>
</ul>

参考

.nextAll（）

.addClass（）

parents（）

相关文章：