Как передать заголовок элемента каталога в title кнпоки?

Question

[DestroyerEvo]

Есть каталог, список элементов. У элемента есть заголовок, картинка и кнопка вызывающая модальное окно.
Как мне передать этот заголовок в тэг h3 модального окна? Пробовал использовать siblings, но ничего не получилось

<div class="item">
<h2><a href="">Заголовок</a></h2>
<div class="image"><img src="image.png"></div>
<div class="button">
<a href="#modal">Заказать</a>
</div>
</div>

Я хочу этот заголовок передать в title кнопки, вызвающей модальное окно. А потом оттуда передать в модальное окно.Но не пойму, как его получить, т.к. кнопка и заголовок на разных уровнях вложенности.
Пробовал так:

$('.button a').click(function() {
				
					var sup = ($(this).closest('.item h2 a').text());				
					$(".button a").attr('title', sup);
					var sup2 = ($(this).attr('title'));
					$(".modal h3").text(sup2);


						});

Но ничего не передает

Answer 1

[Чипекве]

const modalButtons = document.querySelectorAll('.button a');

modalButtons.forEach(button => {
    button.addEventListener('click', setModalTitle);
})

function setModalTitle({ target }) {
    const titleText = target.closest('.item').querySelector('h2').textContent;
    const modalTitle = document.querySelector('.modal h3');

    target.title = titleText;
    modalTitle.textContent = titleText;
}

Comments

[DestroyerEvo]

Спасибо! Сработало!

[DestroyerEvo]

Но проблема в другом, если нажать кнопку у друго элемента в каталоге, то значение в заголовке окна не меняется...

Answer 2

[Александр Цымбал]

В jQuery есть замечательный метод parents(). Он ищет родителя с заданным селектором, не ограничиваясь одним уровнем.

В вашем случае надо найти root-овый элемент - это .item.

link = $(".item h2 a");
text = link.text();
root = link.parents(".item");
button = $(".button a",root); // вот тут ссылку, вызывающую модальное окно ищем в контексте root-ового элемента .item - он указан после запятой.
button.attr("title",text);

Но это только пол дела. Дальше надо передать заголовок в модальное окно. А это уже отдельный вопрос. Всё зависит от того, как вызывается модальное окно. Присутствует ли оно в DOM до момента вызова (спрятанный блок) или загружается ajax-ом. По ссылке вида #modal делаю вывод, что оно уже присутствует в коде. Поэтому лучший вариант - не делать промежуточный этап с заданием атрибута title для кнопки, а сразу искать в DOM тэг заголовка модального окна и вставлять полученный текст в него.