Как на чистом js найти ближайший соседний элемент по селектору в цикле?

Question

[siroper]

Здравствуйте. Мне нужно у каждого <div id="block"> найти первый соседний элемент по селектору, идущий перед этим блоком.

Т.е. например есть такая структура:

<h3>Косметика</h3>
<h3>Компьютер</h3>
<div id="block"></div>

<p></p>
<h2>Еще заголовок</h2>
<div id="block"></div>

<div class="one"><div class="onechild"><h3>Телефон</h3></div></div>
<div id="block"></div>

В скрипте мне нужно пройти циклом по всем id block и найти к каждому ближайший <h3> который стоит ПЕРЕД этим блоком.

var elements = document.querySelectorAll('#block');
elements.forEach(function(el, index) {
	
});

Т.е. получается у первого #block нужно найти <h3>Компьютер</h3> т.к. он ближайший сверху
У второго #block также <h3>Компьютер</h3>
У третьего #block <h3>Телефон</h3>

Пытался найти решение при помощи previousElementSibling , но ничего не получается... Нужно найти ближайший соседний именно по селектору вне зависимости от родителя и т.д.

Answer 1

[Stalker_RED]

elem.previousElementSibling
elem.matches()
elem.querySelector()
перебираете предыдущих соседей (previousElementSibling) пока они есть.
Для каждого проверяете не совпадает ли он с селектором (matches) и нет ли у него подходящих детей (querySelector).

Comments

[siroper]

Пытался найти решение при помощи previousElementSibling , но ничего не получается.

:)

[Stalker_RED]

siroper, дополнил.
Вообще, у вас заголовок не соответствует тексту вопроса и в разметке одинаковые id. Не надо так.

[siroper]

Stalker_RED,

var elements = document.querySelectorAll("#block");
elements.forEach(function(el, index) {
	console.log(findTag(el, "h3"));
});

Не работает, начинает грузить стр как будто бесконечный цикл

[Stalker_RED]

siroper, пофиксил

[siroper]

Stalker_RED, Спасибо большое!

[siroper]

Stalker_RED, Проблема(

вне зависимости от родителя

.

[Stalker_RED]

siroper, что такое "вне зависимости от родителя"?