Блог

Главная - Вопросы по программированию - Добавить класс к определенному элементу

Добавить класс к определенному элементу

#html #jquery #css #css-selectors

#HTML #jquery #css #css-селекторы

Вопрос:

Я создал список (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 классу, но по некоторым причинам он также добавляет его в этот класс 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>

Комментарии:

1. @Mohamed-Yousef прочитайте вопрос еще раз, вы плохо нацелились .ext 🙂 Но смысл использования > правильный.

Ответ №1:

Используйте дочерний селектор. Это должно сработать.

 $('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>A</li>
 <li> 
   <span class="ext">B</span>
   <ul>
     <li> 
       <span class="ext">C</span>
     </li>
   </ul>
 <li>D
</ul>

Метки: