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

Question

在自定义 javascript 变量中，如何获取被单击元素的第三个父元素，然后再获取子元素？我需要从此示例中获取价格 (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($){&nbsp; var btn = $('.add_to_cart_form .btn-primary');&nbsp; btn.on('click', function(e){&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; var parentElem = $(this).closest('.product-teaser__bottom');&nbsp; &nbsp; var data = $('.price-without-discount', parentElem).text();&nbsp; &nbsp; console.log(data);&nbsp; });})(jQuery);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><div class="product-teaser__bottom">&nbsp; &nbsp; <div class="product-teaser__price-block">&nbsp; &nbsp; &nbsp; &nbsp; <div class="product-teaser__price-without-discount"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="product-teaser__price">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="price-without-discount">437,00</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="product-teaser__price-currency">CZK</span>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="product-teaser__add-to-cart">&nbsp; &nbsp; &nbsp; &nbsp; <form class="add_to_cart_form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button class="btn btn-primary">Test Button</button>&nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; </div></div>使用香草javascript .../**&nbsp;* Element.closest Polyfill&nbsp;*&nbsp;* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/closest&nbsp;*/if (!Element.prototype.matches) {&nbsp; Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;}if (!Element.prototype.closest) {&nbsp; Element.prototype.closest = function(s) {&nbsp; &nbsp; var el = this;&nbsp; &nbsp; do {&nbsp; &nbsp; &nbsp; if (Element.prototype.matches.call(el, s)) return el;&nbsp; &nbsp; &nbsp; el = el.parentElement || el.parentNode;&nbsp; &nbsp; } while (el !== null && el.nodeType === 1);&nbsp; &nbsp; return null;&nbsp; };}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){&nbsp; e.preventDefault();&nbsp; var parentElem = this.closest('.product-teaser__bottom');&nbsp; var data = parentElem.querySelector('.price-without-discount').textContent;&nbsp; console.log(data);}, false);<div class="product-teaser__bottom">&nbsp; &nbsp; <div class="product-teaser__price-block">&nbsp; &nbsp; &nbsp; &nbsp; <div class="product-teaser__price-without-discount"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="product-teaser__price">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="price-without-discount">437,00</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="product-teaser__price-currency">CZK</span>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="product-teaser__add-to-cart">&nbsp; &nbsp; &nbsp; &nbsp; <form class="add_to_cart_form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button stype="submit" class="btn btn-primary">Test Button</button>&nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; </div></div>