Question

我正在大脑冻结试图记住在单击不在标签容器内的按钮时访问锚标签上的数据属性的最佳方法，是否有人可以协助我如何执行此操作，因此如果我点击.js-watchlist-add，我想获得.js-film-entry的数据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');

Answer 2

Adil的答案很棒，

尽管使用儿童与查找相比可能更有效，但避免穿越后代。

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

只是给出另一个DOM遍历示例，您也可以使用：

 $(this).parent().siblings('.js-film-entry').data('id');

Answer 3

您可以使用jQuery的has和find方法。

$('.ctn').has(this).find('.js-film-entry')

如何遍历DOM以获取特定元素

3 个答案: