Как узнать, все ли элементы содержат один и тот же класс или нет?

Опубликовано: 30 Ноября, 2021

Формулировка проблемы: для HTML-документа с множеством элементов мы должны определить, содержат ли все выбранные элементы один и тот же конкретный класс CSS или нет. Эту проблему легко решить с помощью JavaScript.

Подход: для этой проблемы мы будем использовать метод Array.prototype.every (), доступный для объекта массива в JavaScript. Этот метод возвращает значение true, только если все элементы массива (для которого вызывается метод) удовлетворяют заданному условию.

Во-первых, нам нужно выбрать все те элементы из HTML-документа, в которых мы хотим проверить, имеют ли они один и тот же класс CSS или нет, используя метод document.querySelectorAll () в JavaScript.
Поскольку метод querySelectorAll () возвращает список узлов всех выбранных элементов, нам сначала нужно преобразовать этот список узлов в массив с помощью метода Array.prototype.from (), чтобы мы могли вызвать для него метод every () .
Наконец, мы будем использовать метод every () для возвращаемого массива выбранных элементов, который вернет истину только в том случае, если все элементы массива имеют указанный класс.

Пример: В следующем примере у нас есть элементы с шестью кнопками в документе HTML, из которых только к пяти добавлен «активный » класс CSS.

HTML

 <!DOCTYPE html>
 < html lang = "en" >
 
< head >
    < meta charset = "UTF-8" />
    < meta name = "viewport" content =
        "width=device-width, initial-scale=1.0" />
 
    < style >
        button {
            background-color: black;
            color: white;
            padding: 10px 24px;
            width: 300px;
            font-size: 18px;
            border: none;
            font-weight: bold;
            transition: all 0.4s;
            margin: 24px 80px;
        }
 
        #container {
            display: flex;
            flex-direction: column;
        }
 
        h1 {
            margin: 24px 80px;
        }
 
        .active {
            background-color: green;
        }
    </ style >
 
    < script >
 
        // Select the required elements
        let buttons = document.querySelectorAll("button");
        let text = document.querySelector("h1");
 
        // Convert the returned node list into an array
        buttons = Array.from(buttons);
 
        // Check if all the selected elements have
        // the class using every() method
        let check = buttons.every((btn)
            => btn.classList.contains("active"));
        text.textContent = check;
    </ script >
 </ head >
 
< body >
    < div id = "container" >
        < button class = "active" >GeeksforGeeks</ button >
        < button class = "active" >GeeksforGeeks</ button >
        < button class = "active" >GeeksforGeeks</ button >
        < button >GeeksforGeeks</ button >
        < button class = "active" >GeeksforGeeks</ button >
        < button class = "active" >GeeksforGeeks</ button >
        < h1 ></ h1 >
    </ div >
 </ body >
 
</ html > 

Выход:

Если вы добавите «активный» класс CSS ко всем кнопкам, будет показан следующий результат.

Technical Scripter JavaScript Вопросы о Web технологиях Picked HTML CSS-Misc HTML-Misc JavaScript-Misc CSS

Как узнать, все ли элементы содержат один и тот же класс или нет?

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ