JavaScript как достать все ссылки из div'ов c нужным атрибутом?

Question

[Дима]

Есть вот такой вот не самый приятный кусок кода

<div ng-repeat="link in filteredLink.dead | customFilter:positions" ng-show="showDead" class="el_list_link ng-scope">
  <div class="number ng-binding" ng-bind="$index+positions.start">1</div>
  <div class="link">
    <div>
      <a href="https://yandex.ru" target="_blank">
        <p class="ng-binding">https://yandex.ru</p>
      </a>
    </div>
  </div>
</div>
<div class="shadow"></div>

Мне нужно достать все ссылки из div-ов с атрибутом ng-show="showDead". Как это лучше сделать?

После этого мне надо открыть эти ссылки в новых вкладках. Использую вот такой код

btn.addEventListener('click', function() {
  for (var i = 0; i < links.length; i++) {
    window.open(links[i], '_blank');
  };
});

Где links это массив всех собранных ссылок.

Заранее спасибо!

Answer 1

[sergski]

var links = [],
            el = document.querySelectorAll('.el_list_link');

        el.forEach(function( item ) {
            var link = item.querySelector( 'a' ).getAttribute('href');
            links.push( link );
        });
        for (var i = 0; i < links.length; i++) {
            window.open(links[i]);
        };

Comments

[Дима]

Спасибо, только страницы не загружаются, а адрес такой: site.com/%7B%7Blink.url%7D%7D

И вот тут
el = document.querySelectorAll('.el_list_link');

Вы, наверное, имели ввиду

el = document.querySelectorAll('div[ng-show="showDead"]');

?

[sergski]

1) это то, что содержится в атрибуте href. В приведенном выше коде -- https://yandex.ru
2) да

[Дима]

1. К сожалению, в href содержалась ссылка, и она не открылась
2. При изменении класса на атрибут, появляется ошибка: Uncaught TypeError: Cannot read property 'getAttribute' of null

[sergski]

в песочнице работает

[Дима]

Открывается почему-то только первая ссылка :) Хотя атрибут ng-show="showDead" проставлен у обоих

[sergski]

А это их браузер блокирует, открывая только первое окно. Посмотрит справа в адресной строке должен быть значок заблокированного окна. Кликните по нему, разрешите и будет все открывать.

[Дима]

Точно, поп-апы блокирует. Но у меня ваш метод почему-то не заработал :) Но объективно, проблему вы решили, спасибо большое

[sergski]

пожалуйста)

Answer 2

[Дима]

Может быть это не самый элегантный метод, но все получилось благодаря следующему коду

var links = document.querySelectorAll('div[ng-show="showDead"] a');
var btn = document.querySelector('#open-links');

links.forEach(function(item) {
  item.classList.add('del-link');
});

var linksArr = document.getElementsByClassName('del-link')

btn.addEventListener('click', function() {
  for (var i = 0; i < linksArr.length; i++) {
    window.open(linksArr[i], '_blank');
  };
});

После присвоения нового класса элементам, с ними можно работать через метод getElementsByClassName, который соберёт все элементы и дальше прогоним их через счетчик

Answer 3

[Stalker_RED]

Let links = Array.from(document.querySelectorAll('div[ng-show="showDead"] a'))
links.forEach(...)

Comments

[Дима]

Спасибо! А с foreach подскажите? :) Счетчик в текущем виде туда не подходит

[Stalker_RED]

Дима Волков, счетчик?

[Дима]

Stalker_RED, да, я имел ввиду вот этот кусок

btn.addEventListener('click', function() {
for (var i = 0; i < links.length; i++) {
  window.open(links[i]);
};
});