javascript - DOM を後方にトラバースして最も近い要素を取得する

Question

jQuery で DOM 要素を取得したいのですが、DOM の後方のみを参照したいのです。

したがって、次の HTML 構造があるとします。

<div id="content">
    <div id="first-module" class="module">
        <h3>Some Module</h3>
        <p>Lorem ipsum... </p>

        <div id="some-other-content">
            <div id="second-module" class="module">
                <h3>Some other module</h3>
                <p>Dolor sit amet...</p>
                <button class="trigger">Trigger 1</button>
            </div>
        </div>

        <button class="trigger">Trigger 2</button>
        <div id="third-module" class="module">
            <h3>Another module</h3>
        </div>
    <div>
</div>

$('.trigger').click(function() {
    // Traverse DOM to find closest .module class
});

そのため、ボタンをクリックすると、 with IDTrigger 1を見つけたいと思います。divsecond-module

をクリックすると、ボタンよりも深くネストされているため、 IDではなくIDをTrigger 2検索する必要があります。divfirst-module second-moduleTrigger 2

このためのjQuery関数はありますか?

Answer 1

.closest()を使用してみてください

$('.trigger').click(function() {
    $(this).closest('.module');
});

Answer 2

Yes, we do have .closest() for this:

$('.trigger').click(function() {
    // Traverse DOM to find closest .module class
    var id = $(this).closest('.module').attr('id');
    alert(id);
});

DEMO HERE

Answer 3

Another way to access it is using parent selector

$('.trigger').click(function() {
   console.log($(this).parent('.module').attr('id'));
    // Traverse DOM to find closest .module class
});