addClass 到特定元素答案

【问题标题】：addClass to specific elementaddClass 到特定元素
【发布时间】：2021-04-30 15:22:06
【问题描述】：

我创建了一个列表 (li)，我想在该列表中添加一个特定的类

<ul class="main">
 <li></li>
 <li> 
   <span class="ext"></span>
   <ul>
     <li> 
       <span class="ext"></span>
     </li>
   </ul>
 <li>
</ul>

我只想向 first ul > second li > first span 类添加一个类，但由于某些原因，它也将它添加到第二个 ul 下的跨度类中。

这是我用来添加类的代码

$('ul.main li:nth-child(2) .ext').addClass('another-ext')

片段：

$('ul.main li:nth-child(2) .ext').addClass('another-ext')

.another-ext {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main">
  <li></li>
  <li>
    <span class="ext"></span>
    <ul>
      <li>
        <span class="ext">hello</span>
      </li>
    </ul>
    <li>
</ul>

【问题讨论】：

@Mohamed-Yousef 再次阅读了这个问题，你的目标是错误的.ext :-) 但是使用> 的意义是正确的。

标签： html jquery css css-selectors

【解决方案1】：

使用子选择器。它应该可以工作。

$('ul.main &gt; li:nth-child(2) &gt; .ext').addClass('another-ext')

.another-ext {color: red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main">
 <li>A</li>
 <li> 
   <span class="ext">B</span>
   <ul>
     <li> 
       <span class="ext">C</span>
     </li>
   </ul>
 <li>D
</ul>

【讨论】：