Как найти родительский элемент, обладающий определенным атрибутом?

Question

Мартин

javascript

Как найти родительский элемент, обладающий определенным атрибутом?

Пришла верстка, в ней есть скрипт для попапа, но он недоработан, и я должен его доработать. У меня возникла проблема: в коде используется нативный JavaScript, а я в основном работаю с jQuery. Сейчас пытаюсь разобраться. 

Можете подсказать, как получить родительский элемент кнопки с нужным классом (modal) и атрибутом data-modal='cart'? Структура HTML может различаться, но сейчас я сталкиваюсь с такой:

<pre><code class="html">&lt;div class="modal" data-modal='cart'&gt;
	&lt;div class=""&gt;
		&lt;div class=""&gt;
			&lt;div class="ttt"&gt;&lt;/div&gt;
			&lt;div class=""&gt;&lt;/div&gt;
			&lt;div class=""&gt;&lt;/div&gt;
			&lt;div class=""&gt;
				&lt;div class=""&gt;&lt;a href="#"&gt;btn&lt;/a&gt;&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div></code></pre>

На jQuery это просто, но его не будет в проекте.

24 декабря 2024 г. 18:53

Ответы на вопрос 2

Похожие вопросы

Answer 1

Чтобы найти родительский элемент кнопки с определенным классом и атрибутом, можно использовать метод `closest` в нативном JavaScript. Этот метод ищет ближайший родительский элемент, который соответствует селектору. Ваша задача заключается в том, чтобы использовать `closest`, и передать ему селектор для поиска нужного элемента.

Вот пример кода, который поможет вам это сделать:

```javascript
// Найдем кнопку по селектору
const button = document.querySelector('a[href="#"]'); // Используем селектор для поиска кнопки

// Если кнопка найдена, ищем родительский элемент с классом "modal" и атрибутом "data-modal='cart'"
if (button) {
    const modal = button.closest('.modal[data-modal="cart"]');

    // Проверяем, нашли ли мы нужный элемент
    if (modal) {
        console.log('Нашли модальное окно:', modal);
    } else {
        console.log('Модальное окно не найдено');
    }
}
```

### Объяснение кода:

1. **`document.querySelector('a[href="#"]')`**: Ищем элемент с селектором `a[href="#"]`. Это кнопка, по которой мы хотим найти родительский элемент.
   
2. **`button.closest('.modal[data-modal="cart"]')`**: Используем метод `closest`, чтобы найти ближайший родительский элемент с классом `modal` и атрибутом `data-modal` равным `cart`.

3. **Проверка наличия элемента**: Если `modal` не равен `null`, значит, элемент найден, и мы можем с ним работать.

Этот способ будет работать независимо от структуры HTML, пока родительский элемент находится выше кнопки в дереве DOM.

Answer 2

В нативном ничуть не сложнее https://developer.mozilla.org/ru/docs/Web/API/Elem... 
 btn.addEventListener('click' e=>{
  const modal = e.target.closest('.modal[data-modal=cart]');
});