Показать сообщение отдельно
  #1 (permalink)  
Старый 02.08.2018, 03:03
Аватар для Globus
Аспирант
Отправить личное сообщение для Globus Посмотреть профиль Найти все сообщения от Globus
 
Регистрация: 04.03.2014
Сообщений: 76

Как скрыть дубли?
Доброго времени суток! Подскажите пожалуйста с таким вопросом:

Есть следующий список, каждый пункт которого имеет уникальный id и неуникальный класс:

<a href="#">Скрыть дубли</a>

<ul id="list">
<li id="item1" class="clone" style="display: block;">01</li>
<li id="item2" class="clone" style="display: none;">02</li>
<li id="item3" class="clone" style="display: block;">03</li>
<li id="item4" class="box" style="display: block;">04</li>
<li id="item5" class="box" style="display: none;">05</li>
<li id="item6" class="box" style="display: none;">06</li>
<li id="item7" class="box" style="display: block;">07</li>
</ul>



Задача следующая - чтобы при нажатии на кнопку "Скрыть дубли" оставался видимым (со значением display: block) только ОДИН любой пункт из повторяющихся у каждого класса, а остальные надо скрыть (display: none)


Например, из кода выше итог получится такой:
01
02
03
04
07


А при нажатии на кнопку "Скрыть дубли" повторяющиеся классы скроются и останется видимым только один блок из каждой группы классов и итог будет такой:

01 
04


В целом скрипт получится по сути таким:
Ищем все пункты меню и собираем их в группы по классам. Проверяем, сколько в каждом классе видимых пунктов. Если более, чем у одного стоит display='block' тогда первый остается display='block', а остальные Hide. Если все скрыты, то ничего не делаем, если только один из группы открыт, то тоже ничего не делаем.

Помогите, пожалуйста, сформулировать это адекватным скриптом Или я в корне не прав с логикой и есть проще пути? Заранее спасибо!
Ответить с цитированием