GTM - 获取点击元素的第三个父级

Question

在自定义的 javascript 变量中，如何获取被点击元素的第三个父元素，然后下到子元素？ 我需要从这个例子中得到 price (437,00) 的值。

点击按钮的选择器：#addToCartForm3V1061551 > button > span

我需要获取的价格选择器：body > main > div.main__inner-wrapper.js-main-inner-wrapper > div.main__content > div.page-content > div.page-content-main > div > div:nth-child(1) > div > div > div.owl-wrapper-outer > div > div:nth-child(2) > div > a > div > div.product-teaser__details.product-teaser--price-discount > div > div.product-teaser__bottom > div.product-teaser__price-block > div.product-teaser__price > span.price-without-discount

我已经尝试过这个答案的变体：https://stackoverflow.com/a/44316348/10363442 但没有运气......

function(){
    var title = jQuery({{Click Element}}).parent().find('h2').html();

    return title;
}

Answer 1

下面应该向您展示如何定位元素，但根据您要实现的目标，您可能需要绑定到一个事件作为您的起点，并且显然要采取进一步的行动......

使用 jQuery ...

var parentElem = jQuery('.add_to_cart_form .btn-primary').closest('.product-teaser__bottom');

var data = jQuery('.price-without-discount', parentElem).text();

console.log(data);

(function($){

  var btn = $('.add_to_cart_form .btn-primary');
  btn.on('click', function(e){
    e.preventDefault();
    var parentElem = $(this).closest('.product-teaser__bottom');
    var data = $('.price-without-discount', parentElem).text();
    console.log(data);
  });

})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="product-teaser__bottom">
    <div class="product-teaser__price-block">
        <div class="product-teaser__price-without-discount"></div>
        <div class="product-teaser__price">
            <span class="price-without-discount">437,00</span>
            <span class="product-teaser__price-currency">CZK</span>
        </div>
    </div>
    <div class="product-teaser__add-to-cart">
        <form class="add_to_cart_form">
            <button class="btn btn-primary">Test Button</button>
        </form>
    </div>
</div>

使用原生 javascript ...

/**
 * Element.closest Polyfill
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
 */
if (!Element.prototype.matches) {
  Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
}
if (!Element.prototype.closest) {
  Element.prototype.closest = function(s) {
    var el = this;
    do {
      if (Element.prototype.matches.call(el, s)) return el;
      el = el.parentElement || el.parentNode;
    } while (el !== null && el.nodeType === 1);
    return null;
  };
}

var btnElem = document.querySelector('.add_to_cart_form .btn-primary');
var parentElem = btnElem.closest('.product-teaser__bottom');
var data = parentElem.querySelector('.price-without-discount').textContent;

console.log(data);

btnElem.addEventListener('click', function(e){
  e.preventDefault();
  var parentElem = this.closest('.product-teaser__bottom');
  var data = parentElem.querySelector('.price-without-discount').textContent;
  console.log(data);
}, false);

<div class="product-teaser__bottom">
    <div class="product-teaser__price-block">
        <div class="product-teaser__price-without-discount"></div>
        <div class="product-teaser__price">
            <span class="price-without-discount">437,00</span>
            <span class="product-teaser__price-currency">CZK</span>
        </div>
    </div>
    <div class="product-teaser__add-to-cart">
        <form class="add_to_cart_form">
            <button stype="submit" class="btn btn-primary">Test Button</button>
        </form>
    </div>
</div>