从HTML结构中的DIV树获取上部元素

Question

I have HTML code for every widget like this:

html code

How get name attribute of div data-tracker-id (=118DBA90ECB84E7BB9E7C07402F4B4B25CC0CD43818B92F8E0C26CA63C5F543D) when i'm clicking on class , for instance, "slick-arrow slick-prev"? Making DOM Element with CSS-Selector doesn't work.

Answer 1

You will need a custom HTML tag for this, where you can write your own code, which looks up this information, relative to the clicked element, which can be referred as {{Click Element}}, when enabled within built-in variables.

You can do it using jQuery, with the parent() function , which traverses up to the specified parent element. Eg

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

You can also simulate this functionality using vanilla JavaScript. One possible solution:

    //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]');

Custom function was based on this article .