jquery - クリックイベント後にjQueryで非直接の「親」を見つけるにはどうすればよいですか？

Question

ライブ サンプルjQueryで基本的なクリックフィルタースクリプトを記述して、3つのクラスを検索print, video, webし、それらのオンとオフを切り替えようとしています。4つのIDを参照する1クリックリスナーがあります。#printInteract, #webInteract, #videoInteract, #allInteract

問題.boxクリックした後、1つ以上のクラスを含む 親を切り替えたい。残念ながら、私のクリックイベントは、親ではなく参照されたIDを削除します.box

*親（直接の親ではありません|| htmlboxをチェック）.boxを取得して非表示/表示するにはどうすればよいですか？

jQuery

$(document).ready(function () {

//attach a single click listener on li elements
$('li.navCenter').on('click', function () {

    // get the id of the clicked li
    var id = $(this).attr('id');

    //conditional cases
    if (id == 'printInteract') {
        $(".box").find('.web, .video').hide();
        $(".box").find('.print').show();
    }
    if (id == 'webInteract') {
        $(".box").find('.print, .video').hide();
        $(".box").find('.web').show();
    }
    if (id == 'videoInteract') {
        $(".box").find('.print, .web').hide();
        $(".box").find('.video').show();
    }
    if (id == 'allInteract') {
        $(".box").find('.video, .print, .web').show();
    }
});
});  

BOX HTML

<div class="box">
<h1 title="Light me up"></h1>
<div class="innerbox">
    <figure>
        <img src="#"
        />
    </figure>
    <ul class="categorySelect">
        <li class="print"></li>
        <li class="video"></li>
    </ul>
</div>

htmlナビゲーション

  <li id="allInteract" class="navCenter">
    <a id="activeAll" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/logo30px.png" /><h3>all</h3></div></a>
</li>
<li id="printInteract" class="navCenter">
    <a id="activePrint" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/print.gif" /><h3>print</h3></div></a>
</li>
<li id="videoInteract" class="navCenter">
    <a id="activeVideo" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/video.gif" /><h3>video</h3></div></a>
</li>
<li id="webInteract" class="navCenter">
    <a id="activeWeb" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/web.gif"  /><h3>web</h3></div></a>
</li>

PS：これにもフェードイントランジションを追加する方法を知っている人はいますか？:)

Answer 1

おそらくあなたは.closest（）を探しています：

$(this).closest('.box').hide();