Как скрыть дубли?
Доброго времени суток! Подскажите пожалуйста с таким вопросом:
Есть следующий список, каждый пункт которого имеет уникальный 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. Если все скрыты, то ничего не делаем, если только один из группы открыт, то тоже ничего не делаем. Помогите, пожалуйста, сформулировать это адекватным скриптом :help: Или я в корне не прав с логикой и есть проще пути? Заранее спасибо! |
<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>
<script>
document.querySelector('a').onclick = e =>{
var arr = [];
document.querySelectorAll('#list li').forEach(el=>(!arr.includes(el.className) && el.style.display !== 'none')?arr.push(el.className):el.style.display = 'none');
};
</script>
|
Спасибо! :thanks: Такого быстрого и красивого решения не ожидал!
|
скрыть дубли
Globus,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
li.hide {
display: none;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelector("a").addEventListener("click", function(e) {
e.preventDefault();
[".clone", ".box"].forEach(function(a) {
a = document.querySelectorAll(a);
e = false;
[].forEach.call(a, function(a) {
a.classList.contains("hide") || (e ? a.classList.add("hide") : e = true)
})
})
})
});
</script>
</head>
<body>
<a href="#">Скрыть дубли</a>
<ul id="list">
<li id="item1" class="clone" >01</li>
<li id="item2" class="clone hide" >02</li>
<li id="item3" class="clone" >03</li>
<li id="item4" class="box" >04</li>
<li id="item5" class="box hide" >05</li>
<li id="item6" class="box hide" >06</li>
<li id="item7" class="box" >07</li>
</ul>
</body>
</html>
|
рони, спасибо)
|
Ну и если вам нужно вернуть состояние обратно... Хотя и необязательно!
<input type="checkbox" id="duplicates-filter">
<label for="duplicates-filter">Скрыть дубли</label>
<ul id="list">
<li id="item1" class="clone">01</li>
<li id="item2" class="clone" hidden>02</li>
<li id="item3" class="clone">03</li>
<li id="item4" class="box">04</li>
<li id="item5" class="box" hidden>05</li>
<li id="item6" class="box" hidden>06</li>
<li id="item7" class="box">07</li>
</ul>
<style>
#duplicates-filter:checked ~ ul .clone:not([hidden]) ~ .clone,
#duplicates-filter:checked ~ ul .box:not([hidden]) ~ .box{
display: none;
}
</style>
|
| Часовой пояс GMT +3, время: 13:27. |