Как получить ID элемента который содержит что-то?

Question

[Anonymous]

Есть элементы на странице :

<div id="1"><div class="Text">Hi, Wrld!</div></div>
<div id="2"><div class="Text">Bye, Wrld!</div></div>
<div id="3"><div class="Text">Hello, Wrld!</div></div>
<div id="4"><div class="Text">Hi, Wrld!</div></div>

Как мне получить ID элемента, который содержит текст внутри Bye, Wrld! ?

Answer 1

[Александр Талалаев]

//Получаем коллекцию всех элементов с классом Text
const elementsTextClass = document.getElementsByClassName('Text');

//Проходим по всем элементам
for (const element of elementsTextClass) {
//Проверяем текстовое содержимое текущего элемента
  if (element.textContent === 'Bye, Wrld!') {
   //Выводим id родителя
    console.log(element.parentElement.id)
  //Дальше нам не нужно перебирать элементы выходим из цикла
    break;
  }
}

Comments

[Anonymous]

А если таких элементов несколько, как получить айди последнего?

[Александр Талалаев]

Sunlan4ch, так же. Убираете break; , заводите переменную, где будете хранить id последнего.

//Получаем коллекцию всех элементов с классом Text
const elementsTextClass = document.getElementsByClassName('Text');
let resultId = '';
//Проходим по всем элементам
for (const element of elementsTextClass) {
//Проверяем текстовое содержимое текущего элемента
  if (element.textContent === 'Bye, Wrld!') {
   //Запоминем текущий id 
    resultId = element.parentElement.id;    
  }
}
console.log(resultId)

Answer 2

[Сергей Соколов]

const id = [...document.querySelectorAll('body > div')] // только div'ы в корне
  .filter(el => el.textContent === 'Bye, Wrld!') // если весь текст внутри совпадает с искомым
  .map(el => el.id) // взять id
  .pop(); // только последний

console.log(id) // "2"

Comments

[Александр Талалаев]

Я бы всё таки такой общий запрос не делал. map тоже не нужен имхо, можно тогда сразу .pop().id ну или потом взять id, чтобы там не падало при null