Фильтрация dom элементов
Ребята, подскажите, как решить следующую задачу:
Есть набор dom элементов: <div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="images/1.jpg"> </div> <div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="images/2.jpg"> </div> <div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="images/3.jpg"> </div> <div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="images/4.jpg"> </div> <div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="images/5.jpg"> </div> <div class="aniimated-thumbnials__img tns-item tns-slide-active" id="aniimated-thumbnials-item0" aria-hidden="false"> <img src="images/1.jpg"> </div> <div class="aniimated-thumbnials__img tns-item tns-slide-active" id="aniimated-thumbnials-item1" aria-hidden="false"> <img src="images/2.jpg"> </div> <div class="aniimated-thumbnials__img tns-item tns-slide-active" id="aniimated-thumbnials-item2" aria-hidden="false"> <img src="images/3.jpg"> </div> <div class="aniimated-thumbnials__img tns-item" id="aniimated-thumbnials-item3" aria-hidden="true" tabindex="-1"> <img src="images/5.jpg"> </div> <div class="aniimated-thumbnials__img tns-item" id="aniimated-thumbnials-item4" aria-hidden="true" tabindex="-1"> <img src="images/4.jpg"> </div> <div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="images/1.jpg"> </div> <div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="images/2.jpg"> </div> <div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="images/3.jpg"> </div> <div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="images/4.jpg"> </div> <div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="images/5.jpg"> </div> Мне необходимо произвести фильтрацию. Я делаю следующим образом: let images = document.querySelectorAll('.aniimated-thumbnials__img') for (let i = 0; i < images.length; i++) { if (images[i].getAttribute('aria-hidden') == 'true') { if (images[i].getAttribute('id') == 'aniimated-thumbnials-item' + [i]) { console.log(images[i]) } } } в итоге я хочу получить: <div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="images/1.jpg"> </div> <div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="images/2.jpg"> </div> <div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="images/3.jpg"> </div> <div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="images/4.jpg"> </div> <div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="images/5.jpg"> </div> Подскажите, как решить данную задачу. |
s24344,
что-то непонятна логика... id есть только у двух дивов, а Вы в итоге получили 5? |
В конце я написал, то, что я хочу получить. Но мне не удалось. Изначальная разметка, это разметка слайдера, где присутствуют клоны. Для моих целей мне необходимо получить именно то, что я описал выше.
|
Остаются только элементы с уникальными картинками в одном экземпляре.
<div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="https://javascript.ru/cat/list/dom.gif"> </div> <div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="https://javascript.ru/cat/list/event.gif"> </div> <div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="https://javascript.ru/cat/list/integr.jpg"> </div> <div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="https://javascript.ru/cat/list/donkey.gif"> </div> <div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="https://javascript.ru/cat/list/libs.jpg"> </div> <div class="aniimated-thumbnials__img tns-item" id="aniimated-thumbnials-item3" aria-hidden="true" tabindex="-1"> <img src="https://javascript.ru/cat/list/libs.jpg"> </div> <div class="aniimated-thumbnials__img tns-item" id="aniimated-thumbnials-item4" aria-hidden="true" tabindex="-1"> <img src="https://javascript.ru/cat/list/donkey.gif"> </div> <div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="https://javascript.ru/cat/list/dom.gif"> </div> <div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="https://javascript.ru/cat/list/event.gif"> </div> <div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="https://javascript.ru/cat/list/integr.jpg"> </div> <div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="https://javascript.ru/cat/list/donkey.gif"> </div> <div class="aniimated-thumbnials__img tns-item" aria-hidden="true" tabindex="-1"> <img src="https://javascript.ru/cat/list/libs.jpg"> </div> <script> var divs = document.querySelectorAll('.aniimated-thumbnials__img[aria-hidden="true"]'); var arr = [], src = ""; for(var i = 0; i < divs.length; i++) { src = divs[i].querySelector('img').src; if(arr.indexOf(src) > -1) { divs[i].parentNode.removeChild(divs[i]); } else arr.push(src); } </script> |
Спасибо.
|
Часовой пояс GMT +3, время: 18:10. |