0

Здравствуй, проблема такая, есть код:

<div class="container">
  <div class="st_att" id="st_link"></div>
  <div class="st_att" id="st_link"></div>
  <div class="st_att" id="st_link"></div>
  <div class="st_att" id="st_link"></div>
</div>
<div class="container">
  <div class="st_att" id="st_link"></div>
</div>
<div class="container">
  <div class="st_att" id="st_link"></div>
  <div class="st_att" id="st_link"></div>
</div>
<div class="container">
  <div class="st_att" id="st_link"></div>
  <div class="st_att" id="st_link"></div>
  <div class="st_att" id="st_link"></div>
  <div class="st_att" id="st_link"></div>
  <div class="st_att" id="st_link"></div>
  <div class="st_att" id="st_link"></div>
</div>

в каждом div c классом container мне надо скрыть .hide() все вложенные div кроме первого или не скрывать если в div c классом container cодержится только один вложенный div, подскажите пожалуйста как можно это реализовать с использованием javascript, спасибо. Уточню что div с классом container может повторяться в любом количестве, как и количество вложенных элементов div которых всегда не менее одного.

1 ответ 1

1
  1. querySelectorAll по классу container складываете в переменную. Например в переменную с названием containers.
  2. Цикл по элементам в этой переменной (containers.forEach)
  3. На каждой итерации кладёте ещё в одну переменную узлы, найденные через querySelectorAll уже в конкретном элементе на текущей итерации (el.querySelectorAll('.st_att')). Например в переменную с названием links.
  4. Делаем цикл по links. Если index элемента == 0, то continue, в ином случае делаем "прятанье".

А можно просто на CSS

.container {
    border: 1px solid black;
    width: 100px;
    height: 50px;
    margin: 5px 0;
}

.st_att {
    border: 1px solid blue;
    width: 100%; 
    height: 5px;
}

.container .st_att:not(:first-child) {
    display: none;
}
<div class="container">
  <div class="st_att" id="st_link"></div>
  <div class="st_att" id="st_link"></div>
  <div class="st_att" id="st_link"></div>
  <div class="st_att" id="st_link"></div>
</div>
<div class="container">
  <div class="st_att" id="st_link"></div>
</div>
<div class="container">
  <div class="st_att" id="st_link"></div>
  <div class="st_att" id="st_link"></div>
</div>
<div class="container">
  <div class="st_att" id="st_link"></div>
  <div class="st_att" id="st_link"></div>
  <div class="st_att" id="st_link"></div>
  <div class="st_att" id="st_link"></div>
  <div class="st_att" id="st_link"></div>
  <div class="st_att" id="st_link"></div>
</div>

1
  • Спасибо! Работает) 1 июн 2021 в 17:51

Ваш ответ

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

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