Javascript, чтобы найти ближайший h2 из другого элемента

Question

Я пытаюсь найти ближайший тег h2 из другого элемента, но не могу с помощью closest () , так как он возвращает ошибку Uncaught TypeError: Не удается прочитать свойство 'style' для null в window.onload .

var strongTag = document.querySelectorAll('strong');
for (var i = 0, len = strongTag.length; i < len; ++i) {
	if(strongTag[i].innerHTML.indexOf('DoFindMe') !== -1) {
	strongTag[i].closest('h2').style.backgroundColor = 'yellow';
	}
}

a {
  display: block;
  background: pink;
}

<div>

<div>
<h2>Head...<a>DoNotChangeMe</a>...ing</h2>
</div>

<div>
<div><a>DoNotChangeMe</a><strong>DoNotFindMe</strong></div>
</div>

</div>

<div>

<div>
<h2>Head...<a>DoChangeMe</a>...ing</h2>
</div>

<div>
<div><a>DoNotChangeMe</a><strong>DoFindMe</strong></div>
</div>

</div>

<div>
<h2>Head...<a>DoNotChangeMe</a>...ing</h2>
</div>

<div>
<div><a>DoNotChangeMe</a><strong>DoNotFindMe</strong></div>
</div>

</div>

Answer 1

Попробуйте этот альтернативный подход: используйте querySelectorAll, чтобы найти все элементы h2 и strong. Затем выполните итерацию по catch, и на каждом элементе strong, который соответствует критериям, примените требуемые изменения стиля к предыдущему элементу h2 в списке. Это возможно, поскольку querySelectorAll гарантированно сохраняет порядок элементов в том виде, в каком они появляются в документе, в соответствии с разделом. 6.2 Поиск элементов API селекторов .

let i, h2, elems

elems = document.querySelectorAll('h2, strong')

for (i =0; i < elems.length; i++) {
    if (elems[i].localName === 'h2')
        h2 = elems[i]
    else if (elems[i].innerHTML.indexOf('DoFindMe') !== -1)
        h2.style.backgroundColor = 'yellow'
}

Answer 2

Ни один из ваших strong элементов не находится внутри элемента h2, поэтому closest () будет возвращать только нули.

Один из вариантов - присвоить класс элементу контейнера и найти его, а затем выполнить поиск элемента h2 внутри него.Ниже я дал элементу контейнера a class="section":

var strongTag = document.querySelectorAll('strong');
strongTag.forEach(tag => {
  const h2 = tag.closest('.section').querySelector('h2');
  if (h2)
    h2.style.backgroundColor = 'yellow';
});

a {
  display: block;
  background: pink;
}

<div class="section">

  <div>
    <h2>Head...<a>DoNotChangeMe</a>...ing</h2>
  </div>

  <div>
    <div><a>DoNotChangeMe</a><strong>DoNotFindMe</strong></div>
  </div>

</div>

<div class="section">

  <div>
    <h2>Head...<a>DoChangeMe</a>...ing</h2>
  </div>

  <div>
    <div><a>DoNotChangeMe</a><strong>DoFindMe</strong></div>
  </div>

</div>

<div class="section">
  <h2>Head...<a>DoNotChangeMe</a>...ing</h2>
</div>

<div class="section">
  <div><a>DoNotChangeMe</a><strong>DoNotFindMe</strong></div>
</div>

Answer 3

.closest('h2') возвращает ноль, потому что в ваших элементах div нет h2.

Добавьте проверку ноль перед использованием if (strongTag[i].closest('h2') != null){ }

Попробуйте добавить h2, чтобы он работал

<div><h2><a>DoNotChangeMe</a><strong>DoFindMe</strong></h2></div>

var strongTag = document.querySelectorAll('strong');
for (var i = 0, len = strongTag.length; i < len; ++i) {
	if(strongTag[i].innerHTML.indexOf('DoFindMe') !== -1) {
	strongTag[i].closest('h2').style.backgroundColor = 'yellow';
	}
}

a {
  display: block;
  background: pink;
}

<div>

<div>
<h2>Head...<a>DoNotChangeMe</a>...ing</h2>
</div>

<div>
<div><a>DoNotChangeMe</a><strong>DoNotFindMe</strong></div>
</div>

</div>

<div>

<div>
<h2>Head...<a>DoChangeMe</a>...ing</h2>
</div>

<div>
<div><h2><a>DoNotChangeMe</a><strong>DoFindMe</strong></h2></div>
</div>

</div>

<div>
<h2>Head...<a>DoNotChangeMe</a>...ing</h2>
</div>

<div>
<div><a>DoNotChangeMe</a><strong>DoNotFindMe</strong></div>
</div>

</div>

Answer 4

Поиск ближайших только поисков родителей. Так что это будет работать в сценарии, как показано ниже:

var strongTag = document.querySelectorAll('strong');
for (var i = 0, len = strongTag.length; i < len; ++i) {
	if(strongTag[i].innerHTML.indexOf('DoFindMe') !== -1) {
	strongTag[i].closest('h2').style.backgroundColor = 'yellow';
	}
}

a {
  display: block;
  background: pink;
}

<div>

<div>
<h2>Head...<a>DoNotChangeMe</a>...ing</h2>
</div>

<div>
<div><a>DoNotChangeMe</a><strong>DoNotFindMe</strong></div>
</div>

</div>

<div>

<div>
<h2>Head...<a>DoChangeMe</a>...ing
<div><a>DoNotChangeMe</a><strong>DoFindMe</strong></div>
</h2>
</div>

<div>
<div><h2><a>DoNotChangeMe</a><strong>DoFindMe</strong></h2></div>
</div>

</div>

<div>
<h2>Head...<a>DoNotChangeMe</a>...ing</h2>
</div>

<div>
<div><a>DoNotChangeMe</a><strong>DoNotFindMe</strong></div>
</div>

</div>