javascript - 如何遍历 DOM 来获取特定元素

Question

我的大脑卡住了，试图记住当单击不在标签容器内的按钮时访问 anchor 标记上的数据属性的最佳方法是什么，有人可以帮助我如何做到这一点，所以如果我点击 .js-watchlist-add 我想获取 .js-film-entry 的 data-id:

JS

<div class="ctn">
    <a href="/movie/{{id}}" class="film-entry js-film-entry" data-id="{{id}}">
        <img src="{{poster}}" class="film-img">

        <div class="result-film-details">
            <h2 class="film-title">{{title}}</h2>
            <p class="film-release-date">Released {{releaseYear}}</p>

            <ul class="result-stats-tabs clearfix">
                <li>{{vote_average}} <span>Vote Average</span></li>
                <li>{{vote_count}} <span>Vote Count</span></li>
            </ul>
        </div>
    </a>
    <div class="cta-ctn">
        <button class="watchlist-add js-watchlist-add">Add to watchlist</button>
        <button class="watchlist-remove js-watchlist-remove">Remove from watchlist</button>
    </div>
</div>

Answer 1

您可以使用closest( ) 获取父元素和 find()获取父级中的后代。

<强> Live Demo

$(this).closest('.ctn').find('.js-film-entry').data('id');