Как определить подкласс с помощью javascript?

Question

Как определить подкласс с помощью javascript?

иван савин Ученик (42), на голосовании 1 год назад

<div id="timepicker_hours_1">
<p class="timepicker_hours_sp_1 first">first</p>
<p class="timepicker_hours_sp_1 second">second</p>
<p class="timepicker_hours_sp_1 third">third</p>
</div>

Как определить различающиеся подклассы элементов с классом timepicker_hours_sp_1 с помощью js и в зависимости от них менять свойства элемента?

Answer 1

Вы можете использовать метод querySelectorAll для выбора всех элементов с классом timepicker_hours_sp_1, а затем использовать цикл forEach для итерации по выбранным элементам. Внутри цикла вы можете использовать метод classList для доступа к классам каждого элемента и проверять, содержит ли он нужный подкласс.

Answer 2

 const timepicker = document.querySelectorAll('.timepicker_hours_sp_1'); 
 
timepicker.forEach(function(item) { 
   if (item.classList.contains('first')) { 
      item.textContent += ' - Элемент содержит класс first'; 
   } else if (item.classList.contains('second')) { 
      item.textContent += ' - Элемент содержит класс second'; 
   } else if (item.classList.contains('third')) { 
      item.textContent += ' - Элемент содержит класс third'; 
   } 
})

Метод contains от метода classList проверяет классы на предмет наличия того, что указано в скобках, и выдает true или false в зависимости от совпадения. Есть еще другой очень похожий способ проверки через className и includes, но не особо есть в нем смысл из-за первого варианта.

 const timepicker = document.querySelectorAll('.timepicker_hours_sp_1'); 
 
timepicker.forEach(function(item) { 
   if (item.className.includes('first')) { 
      item.textContent += ' - Элемент содержит класс first'; 
   } else if (item.className.includes('second')) { 
      item.textContent += '- Элемент содержит класс second'; 
   } else if (item.className.includes('third')) { 
      item.textContent += ' - Элемент содержит класс third'; 
   } 
})

Answer 3

  
  first
 
  second
 
  third

Изучай css селекторы.

 const [second] = document.querySelector('#timepicker_hours_1 > #second');