從HTML結構中的DIV樹獲取上部元素

Question

我有每個小部件的HTML代碼，如下所示：

HTML代碼

如何在點擊課程時獲取div data-tracker-id （= 118DBA90ECB84E7BB9E7C07402F4B4B25CC0CD43818B92F8F0E0C26CA63C5F543D）的名稱屬性，例如“slick-arrow slick-prev”？ 使用CSS-Selector創建DOM元素不起作用。

Answer 1

您需要一個自定義的HTML標記，您可以編寫自己的代碼，在內置變量中啟用時，相對於單擊的元素（可以稱為{{Click Element}}）查找此信息。

您可以使用jQuery和parent（）函數來執行此操作，該函數遍歷指定的父元素。 例如

var parent = $({{Click Element}}).parent('div[data-tracker-id]');

您還可以使用vanilla JavaScript模擬此功能。 一種可能的方案：

    //define function
      var gtmGetClosest = function ( elem, selector ) {

        // Element.matches() polyfill
        if (!Element.prototype.matches) {
            Element.prototype.matches =
                Element.prototype.matchesSelector ||
                Element.prototype.mozMatchesSelector ||
                Element.prototype.msMatchesSelector ||
                Element.prototype.oMatchesSelector ||
                Element.prototype.webkitMatchesSelector ||
                function(s) {
                    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                        i = matches.length;
                    while (--i >= 0 && matches.item(i) !== this) {}
                    return i > -1;
                };
        }

        // Get closest match
        for ( ; elem && elem !== document; elem = elem.parentNode ) {
            if ( elem.matches( selector ) ) return elem;
        }

        return null;

      };

    //use it
    var parent = gtmGetClosest({{Click Element}}, 'div[data-tracker-id]');

自定義功能基於本文 。