jQueryのレベルアップと.find（）

Question

私はjqueryを学習していますが、セレクタでこの小さな問題があります。

これは私のDOM構造である：

<li> 
    <header class="title"> 
    <span>Text</span> 
    <a href="#work-1">My trigger</a> 
    </header> 
    <div id="work-1"> 
    <div class="description"> 
     <p>some shit about the work</p> 
    </div> 
    <div class="carousel"> 
     <img/> 
     <img/> 
     <img/> 
     ... 
    </div> 
    </div> 
</li> 

OK。私の作品とのリンクがたくさんあるシンプルなリストです。すべてのアイテムにはその説明とカルーセル上にある写真があります。

私がリンクをクリックすると、カルーセルを取得する変数jqueryを作成したいと思います。私はこれを書いていますが、それはうまくいきません。

$('a').click(function(e){ 
    var href = $(e.target).attr('href'); 
    // this is to make my div#work toggle from display:none to block. 

    var carousel = $(href).find('.carousel'); 
    // this is the wrong code. I cant reach the carousel from there. 
}); 

ありがとうございました！

Answer 1

これは動作するはずです：

クリックハンドラ内

$('a').click(function(e){ 
    var carousel = this.parents('li').find('.carousel'); 
}); 

は、 "これは" クリックされたA-要素を指します。クリックされたA要素の親であるLI要素を見つけ、そのLI要素の子要素であるカルーセルを検索する。

Answer 2

使用は、この代わりに、あなたが二回（.parent()に）戻ってか、のliタグを見つけるまで.parentsを使用する必要があり、そのdiferent要素

$('.carousel') 

Answer 3

をカルーセル。

$('a').click(function(){ 
 
    var href = $(this).attr('href'), 
 
    \t \t li = $(this).parents('li'), 
 
    \t \t carousel = li.find(href).find('.carousel'); 
 
    console.log(carousel); 
 
    carousel.css('background-color', 'red'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 

 
<li> 
 
    <header class="title"> 
 
    <span>Text</span> 
 
    <a href="#work-1">My trigger</a> 
 
    </header> 
 
    <div id="work-1"> 
 
    <div class="description"> 
 
     <p>some shit about the work</p> 
 
    </div> 
 
    <div class="carousel"> 
 
     <img/> 
 
     <img/> 
 
     <img/> 
 
    </div> 
 
    </div> 
 
</li> 
 
</ul>

方法によって、あなたのスクリプトは、同様に私の作品：
https://jsfiddle.net/rozgwq8e/

いますが、代わりにe.targetの$（this）を使用することができます。