Фильтрация 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, время: 20:26. |