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> 

ок. Его простой список с большим количеством ссылок с моими работами. каждый предмет имеет свое описание и некоторые фотографии, которые идут на карусели.

Когда я нажимаю на ссылку, я хочу создать переменную в 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'); 
}); 

Внутри обработчика щелчка, «это» относится к А-элемент, который щелкнули. Найдите LI-элемент, который является родителем элемента A, который был нажат, и затем выполните поиск карусели, которая является дочерним элементом этого элемента LI.

Answer 2

использовать это вместо того, карусельного сво Diferent элемент

$('.carousel') 

Answer 3

Вы должны вернуться (с .parent()) дважды или использовать .parents до тех пор, пока не найдет литиево тег.

$('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.