Блог

Главная - Вопросы по программированию - Найдите первый div без класса, а затем добавьте класс

Найдите первый div без класса, а затем добавьте класс

#jquery

#jquery

Вопрос:

У меня есть это:

 <div class="tab-wrap">
   <div class="tab-item sold-out" aria-hidden="true" tabindex="0">Tab 1</div>
   <div class="tab-item sold-out"  aria-hidden="true" tabindex="-1">Tab 2</div>
   <div class="tab-item sold-out" aria-hidden="true" tabindex="-1">Tab 3</div>
   <div class="tab-item" aria-hidden="true" tabindex="-1">Tab 4</div>
</div>

Чего я хочу добиться, так это выбрать первый элемент «.tab», не содержащий класс «.sold-out», и добавить к нему класс «.active». Это может варьироваться, иногда это может быть первый div, иногда третий. Я хочу проверить, есть ли первый доступный div без распроданного класса.

То, что у меня есть, это добавляет его к первому div, независимо от того, есть ли в нем класс «распродано»:

 if($(".tab-wrap > .tab-item").not(':has(.sold-out)')){
  $(".tab-wrap > .tab-item").first().addClass("active")
}

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

1.Стоит рассмотреть, что :has делает api.jquery.com/has Сократите набор сопоставляемых элементов до тех, у которых есть потомок, соответствующий элементу selector или DOM. — .tab-item не имеет .sold-out в качестве потомка

Ответ №1:

Вы можете достичь того, что вам нужно, в одном селекторе, используя комбинацию :not и :first . Попробуйте это:

 $('.tab-item:not(.sold-out):first').addClass('sold-out');  
 .sold-out { color: #C00; }  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-wrap">
  <div class="tab-item sold-out" aria-hidden="true" tabindex="0">Tab 1</div>
  <div class="tab-item sold-out" aria-hidden="true" tabindex="-1">Tab 2</div>
  <div class="tab-item sold-out" aria-hidden="true" tabindex="-1">Tab 3</div>
  <div class="tab-item" aria-hidden="true" tabindex="-1">Tab 4 (class added here)</div>
  <div class="tab-item" aria-hidden="true" tabindex="-1">Tab 5</div>
  <div class="tab-item" aria-hidden="true" tabindex="-1">Tab 6</div>
  <div class="tab-item" aria-hidden="true" tabindex="-1">Tab 7</div>
</div>

Ответ №2:

Вот то, что вы хотите, только в одной строке с обоими селекторами

 $('.tab-item:not(.sold-out):first').addClass('sold-out');