Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Фильтрация dom элементов (https://javascript.ru/forum/dom-window/74348-filtraciya-dom-ehlementov.html)

s24344 03.07.2018 15:38

Фильтрация 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>


Подскажите, как решить данную задачу.

Manyasha 03.07.2018 15:47

s24344,
что-то непонятна логика... id есть только у двух дивов, а Вы в итоге получили 5?

s24344 03.07.2018 15:58

В конце я написал, то, что я хочу получить. Но мне не удалось. Изначальная разметка, это разметка слайдера, где присутствуют клоны. Для моих целей мне необходимо получить именно то, что я описал выше.

Dilettante_Pro 03.07.2018 16:15

Остаются только элементы с уникальными картинками в одном экземпляре.
<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>

s24344 03.07.2018 19:03

Спасибо.


Часовой пояс GMT +3, время: 18:10.