javascript - 通过其孙辈(jqlite)访问孙辈 parent 元素

Question

我的页面中有一个 Accordion ，当我单击 Accordion 时，我喜欢屏幕移动并滚动到 Accordion 标题的顶部。 Accordion 的结构是这样的:

<section id="owners-content" class="faq-section flex-container">
        <h2 class="heading-4 centered large-col-8 medium-col-10 small-col-4 ">"My XYZ" Owner's Info</h2>
         <div class="accordion-container flex-container ng-scope" role="tablist" aria-live="polite" data-ng-controller="tciAccordionController">
            <div role="tabpanel" class="accordion" data-tci-accordion="" data-tci-accordion-event-category="faq_expan_">
              <ul>
                <li class="item flex-container " data-item-id="0" data-label="how_do_i_access_club_toyota">
                <div class="centered large-col-8 medium-col-10 small-col-4 phone-col-4">
                    <button class="accordion-toggle ng-scope" aria-pressed="false" aria-label="How do I access Club XYZ?" data-ng-click="vm.toggle(0)">
                        <h4 class="accordion-header">
                            How do I access Club XYZ?
                        <span class="accordion-arrow" data-index="0">
                        <svg version="1.1" class="svg-arrow-container" role="img" aria-label="arrow" color-interpolation="auto" shape-rendering="auto" image-rendering="auto" text-rendering="auto" color-rendering="auto" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-157 170.1 83.5 61.9" style="enable-background:new -157 170.1 83.5 61.9;" xml:space="preserve">
                          <path role="presentation" class="st3 svg-arrow faq" d="M-77.2,204.8l-30.2-30.8c-0.3-0.3-0.5-0.6-0.8-0.9l-0.3-0.3c-3-2.9-7.5-3.5-11-1.7l0,0
            c-0.2,0.1-0.3,0.2-0.5,0.3c-0.1,0.1-0.3,0.2-0.4,0.2l-0.1,0.1c-0.5,0.3-0.9,0.7-1.3,1.1l-0.4,0.3c-0.2,0.2-0.3,0.3-0.5,0.5
            l-30.6,31.1c-3.7,3.7-3.6,9.8,0.1,13.4l0.3,0.3c3.7,3.7,9.8,3.6,13.4-0.1l24.3-24.5l24.2,24.6c3.7,3.7,9.7,3.8,13.4,0.1l0.3-0.3
            C-73.6,214.5-73.5,208.5-77.2,204.8z">
                          </path>
                       </svg>
                       </span>
                       </h4>
                    </button>
                    <div class="accordion-content " aria-hidden="true">
                        <div class="inner">
                           <p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p> 
                        </div>
                    </div>
                </div>
                </li>
            <li class="item flex-container " data-item-id="1" data-label="what_is_the_vehicle_identification_number"> similar repeating list ....

我使用的方法是

angular.element(document).scrollTop(angular.element($content.parent().parent().parent().parent().parent().parent()).prop('offsetTop') + id * item.clientHeight);

这在团队中是大忌。有没有更好的 css 可以从单击的元素中获取祖父元素？

Answer 1

由于 .closest() 不可用，您可以自己创建:

angular.element.closest = function(a, b) {
    for (var c = b.charAt(0); a && a !== document; a = a.parentNode)
        if ("." === c && a.classList.contains(b.substr(1)) || "#" === c && a.id === b.substr(1) || "[" === c && a.hasAttribute(b.substr(1, b.length - 2)) || a.tagName.toLowerCase() === b) return a;
    return !1
};

然后使用简单的方法:

angular.element('selector').closest('selector')