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

Question

[Denis Chelpanov]

Приветствую, столкнулся с проблемой получения значения определенного тега.

У меня имеется вот такая структура корзины

<div id="products" class="row product__list">
            <!-- Start Single Product -->
            <div class="col-md-3 single__pro col-lg-3 col-md-4 cat--1 col-sm-12">
                <div class="product foo">
                    <div class="product__inner">
                        <div class="pro__thumb">
                            <a href="#">
                                <img src="images/product/1.png" alt="product images">
                            </a>
                        </div>
                        <div class="product__hover__info">
                            <ul class="product__action">
                                <li><a data-toggle="modal" data-target="#productModal" title="Quick View" class="quick-view modal-view detail-link" href="#"><span class="ti-plus"></span></a></li>
                                <li><a title="Add TO Cart"><span class="ti-shopping-cart" data-action="addToCart"></span></a></li>
                            </ul>
                        </div>
                        <div class="add__to__wishlist">
                            <a data-toggle="tooltip" title="Add To Wishlist" class="add-to-cart" href="wishlist.html"><span class="ti-heart"></span></a>
                        </div>
                    </div>
                    <div class="product__details">
                        <h2><a href="product-details.html">Simple Black Clock</a></h2>
                        <ul class="product__price">
                            <li class="old__price">$16.00</li>
                            <li class="new__price">$10.00</li>
                        </ul>
                    </div>
                </div>
            </div>

При нажатии на определенный span мне нужно получить данные некоторых тегов, чтобы добавить их в массив.
У меня сейчас вот такой обработчик событий

class Menu {
    constructor(elem) {
      this._elem = elem;
      elem.onclick = this.onClick.bind(this); // (*)
    }

    addToCart() {
       alert("target = " + event.target.tagName);
    }

    onClick(event) {
      let action = event.target.dataset.action;
      if (action) {
        this[action]();
      }
    };
  }

  new Menu(products);

Тут я получаю только сам элемент на который нажали. А как, к примеру, получить значение которое находится в блоке этого же товара в классе .product__details>h2>a(Simple Black Clock)?

Comments

[Denis]

jQuery одобряете? Если да, то метод .parent() (подъём на ветку вверх)
А так же есть .children(), .next(), .prev().

[Дмитрий Беляев]

не стоит хранить данные в DOM...
ну а по теме -

event.target.parentElement.querySelector('.product__details>h2>a')

[Denis Chelpanov]

Дмитрий Беляев, а где тогда лучше хранить, не обращаться же каждый раз в бд?

[Denis Chelpanov]

Дмитрий Беляев, не работает

[Дмитрий Беляев]

Denis Adamov, в состоянии приложения лучше хранить
при этом не обязательно для этого нужны библиотеки управления состоянием, можно просто и в объект положить

Answer 1

[Арсений Матыцин]

Перебирать родителя с шагом вверх и сравнивать с заданными условиями.