Скрипт проверки наличия блока

@skapunker · Регистрация: 13.12.2013

Author24 — интернет-сервис помощи студентам

Всем привет! Ребята помогите пожалуйста. Нужно сделать простенький скрипт, который будет проверять наличие блока и в случае его отсутствия добавлять стиль к другому блоку. Вот такая структура имеется

HTML5
1
2
3
4
<div class="related">
</div>
<div class="comment">
</div>

Вот, нужно проверить наличие блока related перед блоком comment. Если блока related нету, то блоку comment нужно добавить стиль margin-top:10px

Помогите пожалуйста, а то я ума не приложу как это сделать ((

@Peoples · 18.08.2019, 22:29

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div class="related">
</div>
<div class="comment">
</div>
</body>
<script>
let related = document.querySelector(".related");
document.querySelector(".comment").style.marginTop  = !related ? 10 + "px" : 0;
</script>
</html>

@Пифагор · 18.08.2019, 22:32

JavaScript
1
2
if(document.querySelector('.related') == null)
    document.querySelector('div.comment').style.marginTop = '10px';

@amr-now · 19.08.2019, 08:59

Здравствуйте.
Рассмотрим ситуацию, когда комментариев несколько. А перед каждым комментарием может быть или не быть блок related:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div class="related">
    </div>
    <div class="comment">
    </div>
    <script>
        // Здесь мы каким-то образом нашли конкретный комментарий
        let comment = document.querySelector(".comment");
        // Например, перед каждым комментарием проверяем свой related блок
        let prev = comment.previousElementSibling;
        if (!prev || !prev.classList.contains("related")) {
            comment.style.marginTop = "10px";
        }
    </script>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Реализация Domain-Driven Design с Java Javaican 20.05.2025 DDD — это настоящий спасательный круг для проектов со сложной бизнес-логикой. Подход, предложенный Эриком Эвансом, позволяет создавать элегантные решения, которые точно отражают реальную предметную. . .	Возможности и нововведения C# 14 stackOverflow 20.05.2025 Выход версии C# 14, который ожидается вместе с . NET 10, приносит ряд интересных нововведений, действительно упрощающих жизнь разработчиков. Вы уже хотите опробовать эти новшества? Не проблема! Просто. . .	Собеседование по Node.js - вопросы и ответы Reangularity 20.05.2025 Каждому разработчику рано или поздно приходится сталкиватся с техническими собеседованиями - этим стрессовым испытанием, где решается судьба карьерного роста и зарплатных ожиданий. В этой статье я. . .	Cython и C (СИ) расширения Python для максимальной производительности py-thonny 20.05.2025 Python невероятно дружелюбен к начинающим и одновременно мощный для профи. Но стоит лишь заикнуться о высокопроизводительных вычислениях — и энтузиазм быстро улетучивается. Да, Питон медлительнее. . .	Безопасное программирование в Java и предотвращение уязвимостей (SQL-инъекции, XSS и др.) Javaican 19.05.2025 Самые распространёные векторы атак на Java-приложения за последний год выглядят как классический "топ-3 хакерских фаворитов": SQL-инъекции (31%), межсайтовый скриптинг или XSS (28%) и CSRF-атаки. . .
Введение в Q# - язык квантовых вычислений от Microsoft EggHead 19.05.2025 Microsoft вошла в гонку технологических гигантов с собственным языком программирования Q#, специально созданным для разработки квантовых алгоритмов. Но прежде чем погружаться в синтаксические дебри. . .	Безопасность Kubernetes с Falco и обнаружение вторжений Mr. Docker 18.05.2025 Переход организаций к микросервисной архитектуре и контейнерным технологиям сопровождается лавинообразным ростом векторов атак — от тривиальных попыток взлома до многоступенчатых кибератак, способных. . .	Аугментация изображений с Python AI_Generated 18.05.2025 Собрать достаточно большой датасет для обучения нейронной сети — та ещё головная боль. Часами вручную размечать картинки, скармливать их ненасытным алгоритмам и молиться, чтобы модель не сдулась при. . .	Исключения в Java: советы, примеры кода и многое другое Javaican 18.05.2025 Исключения — это объекты, созданные когда программа сталкивается с непредвиденной ситуацией: файл не найден, сетевое соединение разорвано, деление на ноль. . . Список можно продолжать до бесконечности. . . .	Как сделать SSO (Single Sign-On) в C# приложении stackOverflow 18.05.2025 SSO — это механизм, позволяющий пользователю пройти аутентификацию один раз и получить доступ к нескольким приложениям без повторного ввода учетных данных. Вы наверняка сталкивались с ним, когда. . .

Опции темы

Скрипт проверки наличия блока

Решение