Как найти элемент внутри div, с условием?

Question

[Gruzdov]

Такая конструкция:

<div class="some_class_1">
<a class="anchor_class" href="#">target text</a>
<div class="some_class_2">
<p>special text</p>
</div>
</div>

Как с помощью Javascript, найти текст внутри ссылки, при условии что внутри родительского div присутствует дочерний div с текстом special text ?

В какую сторону мне гуглить? :)

Answer 1

[Abdula Magomedov]

jQuery

var element = $(".some_class_1 > .some_class_2:contains(special text)");

Answer 2

[Дмитрий Балашов]

Немного изменил твой HTML

<div class="container">
  <div class="some_class_1">
    <a class="anchor_class" href="#">target text</a>
    <div class="some_class_2">
      <p>spasecial text</p>
    </div>
  </div>

  <div class="some_class_1">
    <a class="anchor_class" href="#">target text</a>
    <div class="some_class_3">
      <p>special text</p>
    </div>
  </div>
</div>

Вот немного костыльный JS, который реализует твою задачу

// Берем общий контейнер с подобными элементами
var cont = document.querySelector('.container');
// Вещаем на него обработчик
cont.addEventListener('click', function(event) {
  // Используем делегирование для определения того, что клик произошел по нужному нам элементу
  var node = event.target.closest('.some_class_1');
  if (!node) return;
  // Нахдоим детей-элементов этого элемента
  var nodeChildrenArr = Array.from(node.children);
  // Проверяем, есть ли среди них тот, у котрого первым потомком идет элемент с содержимым 'special text'
  if (nodeChildrenArr.some(function(elem){
    if (elem.firstElementChild) {
      return elem.firstElementChild.innerHTML == 'special text';  
    }
    return false;
  })) {
    // Если есть такой элемент, то выводим текст ссылки
    console.log(node.querySelector('.anchor_class').innerHTML);
  }
});