Доброго времени суток! Подскажите пожалуйста с таким вопросом:
Есть следующий список, каждый пункт которого имеет уникальный 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. Если все скрыты, то ничего не делаем, если только один из группы открыт, то тоже ничего не делаем.
Помогите, пожалуйста, сформулировать это адекватным скриптом
Или я в корне не прав с логикой и есть проще пути? Заранее спасибо!