Как определить подкласс с помощью javascript?
<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 и в зависимости от них менять свойства элемента?
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';
}
}) <div id="timepicker_hours_1">
<p id="first">first</p>
<p id="second">second</p>
<p id="third">third</p>
</div> Изучай css селекторы.
const [second] = document.querySelector('#timepicker_hours_1 > #second'); Вы можете использовать метод querySelectorAll для выбора всех элементов с классом timepicker_hours_sp_1, а затем использовать цикл forEach для итерации по выбранным элементам. Внутри цикла вы можете использовать метод classList для доступа к классам каждого элемента и проверять, содержит ли он нужный подкласс.