0

Есть html разметка:

<div class="wrapper">
    <div class="sidebar"></div>
    <div class="content"></div>
</div>

Задача:

Если есть в разметке div с классом sidebar, нужно div с классом content добавить еще один класс right.

Прошу помощи в реализации.

1
  • 1
    Покажите что уже пробовали
    – EzioMercer
    5 июн 2022 в 22:07

4 ответа 4

1

Умещаю всё в одну строку:

document.querySelector('div.sidebar') ? document.querySelector('div.content').classList.add('right') : null
<div class="wrapper">
    <div class="sidebar">1</div>
    <div class="content">2</div>
</div>

А если делать красивый код тогда вот:

document.querySelector('div.sidebar')
  ? document.querySelector('div.content').classList.add('right')
  : null
<div class="wrapper">
    <div class="sidebar">1</div>
    <div class="content">2</div>
</div>

1

Попробуйте такой подход:

let wrapper = document.querySelector('.wrapper'); //Здесь мы находим "главного" нужной нам разметки наших `.sidebar` и `.content`.

if (wrapper.querySelector('.sidebar') { // чтобы уже здесь искать класс `.sidebar` только в нужном родителе
   wrapper.querySelector('.content').classList.add('right'); //и, если найдём, добавить класс `.right` к элементу `.content`
}
5
  • Ваш ответ немного неправильный, вот к примеру если в .wrapper будет ребёнок с классом .sidebar, но он будет не div-ом, а к примеру span-ом. А в задаче написано, что нужно именно изменить div только если будет div с классом sidebar. Это также касается и .content в котором не уточнён элемент.
    – ΝNL993
    6 июн 2022 в 8:09
  • @ΝNL993 Не самая лучшая практика делать выборку по тегу с классом, лучше использовать class без указания тега. Маловероятно, что сайдбар будет создан с помощью span, для него лучше использовать aside
    – soledar10
    6 июн 2022 в 8:24
  • @soledar10 я привёл span как пример, если вы не читали мой комментарий полностью, то критиковать вы не можете. Цитата: "Ваш ответ немного неправильный, вот к примеру если..."
    – ΝNL993
    6 июн 2022 в 13:18
  • @soledar10 и по задаче кстати нужны именно div-ы, а не любые теги с вышеупомянутым классом.
    – ΝNL993
    6 июн 2022 в 13:20
  • @ΝNL993 - Нет никакой критики, вполне возможно автор не в курсе, что для семантики лучше использовать теги html5, поэтому и написал, что в данном случае использование селектора тег с классом не целесообразно.
    – soledar10
    6 июн 2022 в 14:06
1

В условии было именно про добавить класс right, но вообще такие задачи на условное форматирование блока часто могут быть решены через селекторы, без javascript. Посмотрите, может, в вашем случае такое тоже применимо.

div {
  outline: 1px solid tomato;
  min-width: 50px;
  min-height: 50px;
  background-color: #eee;
  margin: 10px;
  padding: 5px;
}

.sidebar + .content {
  background-color: tomato;
}
<div class="wrapper">wrapper without sidebar
    <div class="content">content</div>
</div>

<div class="wrapper">wrapper WITH sidebar
    <div class="sidebar">sidebar</div>
    <div class="content">content</div>
</div>

0

На самом деле тут несколько способов решить задачу, в зависимоти от того что именно нужно:

  • Если во всей разметке может быть только 1 div.sidebar и 1 div.content и они могут быть расположены где угодно (т.е. не факт что они будут соседями), то можно сделать так:

document.querySelector('div.sidebar') ? document.querySelector('div.content').classList.add('right') : null;

// Ну или более сокращённо, то можно так

document.querySelector('div.sidebar') && document.querySelector('div.content').classList.add('right');
<div class="wrapper">
    <div class="sidebar"></div>
    <div class="content"></div>
</div>

  • Если во всей разметке может быть хотябы 1 div.sidebar и сколь угодно много div.content и они могут быть расположены где угодно, то можно сделать так:

const isSidebarExists = document.querySelector('div.sidebar') !== null;

if (isSidebarExists) {
  document.querySelectorAll('div.content').forEach(content => content.classList.add('right'));
}
<div class="wrapper">
    <div class="sidebar"></div>
    <div class="content"></div>
</div>
<div class="content"></div>

  • Если во всей разметке может быть только 1 div.sidebar и 1 div.content и они обязательно соседи, то можно сделать так:

// Если content будет находится непосредственно после sidebar

document.querySelector('div.sidebar + div.content')?.classList.add('right');

// Если у content и sidebar просто общий предок, но content всё равно идёт после sidebar

document.querySelector('div.sidebar ~ div.content')?.classList.add('right');

// Если у content и sidebar просто общий предок

document.querySelector('div.sidebar').parentNode.querySelector(':scope > div.content')?.classList.add('right')
<div class="wrapper">
    <div class="content"></div>
    <div class="sidebar"></div>
    <div class="content"></div>
</div>

  • Если во всей разметке может быть сколь угодно много div.sidebar и для каждого из них может быть существует 1 соседний div.content, то можно сделать так:

// Если content находится непосредственно после sidebar

document.querySelectorAll('div.sidebar').forEach(sidebar => {
  sidebar.parentNode.querySelector('div.sidebar + div.content')?.classList.add('right');
})


// Если у content и sidebar просто общий предок, но content всё равно идёт после sidebar

document.querySelectorAll('div.sidebar').forEach(sidebar => {
  sidebar.parentNode.querySelector('div.sidebar ~ div.content')?.classList.add('right');
})


// Если у content и sidebar просто общий предок

document.querySelectorAll('div.sidebar').forEach(sidebar => {
  sidebar.parentNode.querySelector(':scope > div.content')?.classList.add('right');
})
<div class="wrapper">
    <div class="sidebar"></div>
    <div class="content"></div>
</div>
<div class="wrapper">
    <div class="sidebar"></div>
</div>
<div class="wrapper">
    <div class="sidebar"></div>
    <div class="content"></div>
</div>

  • Если во всей разметке может быть сколь угодно много div.sidebar и для каждого из них может быть существует сколь угодно много соседних div.content, то можно сделать так:

// Если у content и sidebar просто общий предок, но content всё равно идёт после sidebar

document.querySelectorAll('div.sidebar').forEach(sidebar => {
  sidebar.parentNode.querySelectorAll('div.sidebar ~ div.content').forEach(content => {
    content.classList.add('right');
  });
})


// Если у content и sidebar просто общий предок

document.querySelectorAll('div.sidebar').forEach(sidebar => {
  sidebar.parentNode.querySelectorAll(':scope > div.content').forEach(content => {
    content.classList.add('right');
  });
})
<div class="wrapper">
    <div class="sidebar"></div>
    <div class="content"></div>
</div>
<div class="wrapper">
    <div class="sidebar"></div>
</div>
<div class="wrapper">
    <div class="sidebar"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

Но будьте осторожны на счёт :scope его не поддерживает IE

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.