Скрыть все ссылки кроме одной в разных блоках div

Question

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

 <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 которых всегда не менее одного.

Answer 1

querySelectorAll по классу container складываете в переменную. Например в переменную с названием containers.
Цикл по элементам в этой переменной (containers.forEach)
На каждой итерации кладёте ещё в одну переменную узлы, найденные через querySelectorAll уже в конкретном элементе на текущей итерации (el.querySelectorAll('.st_att')). Например в переменную с названием links.
Делаем цикл по 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>

БЛОГ НА HUSL

Скрыть все ссылки кроме одной в разных блоках div

Ответы (1 шт):