jQuery перебор DOM элементов

413

12 января 2017, 07:05

Приветствую всех. Есть html примерно такой структуры:

    <div class="title"></div>
<div class="block">
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="title"></div>
<div class="block">
  <div class="item" style="display: none"></div>
  <div class="item" style="display: none"></div>
  <div class="item" style="display: none"></div>
  <div class="item"></div>
</div>
<div class="title"></div>
<div class="block">
  <div class="item" style="display: none"></div>
  <div class="item" style="display: none"></div>
</div>

Подскажите, как сделать блоки класса "title" тоже display: none , если все item внутри .block display: none (как бы пустые) , а если хоть один видимый, то не трогать ?

Пробовал функцией .each() обходить .block , а внутри еще .each() по .item ничего не выходит.

Answer 1

Извратиться что ли и упихать всё в одну конструкцию?
Хм.. А вообще я подумал... И что-то ничего лучше не придумывается...

$(".title").hide().next().children(":visible").parent().prev().show()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="title">A</div> 
<div class="block"> 
  <div class="item"></div> 
  <div class="item"></div> 
</div> 
 
<div class="title">B</div> 
<div class="block"> 
  <div class="item" style="display: none"></div> 
  <div class="item" style="display: none"></div> 
  <div class="item" style="display: none"></div> 
  <div class="item"></div> 
</div> 
 
<div class="title">C</div> 
<div class="block"> 
  <div class="item" style="display: none"></div> 
  <div class="item" style="display: none"></div> 
</div>