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');
});

在点击处理程序中，“ this”是指被点击的A元素。 找到被单击的A元素的父元素的LI元素，然后搜索作为该LI元素的子元素的轮播。

Answer 2

用它代替，轮播其不同的元素

$('.carousel')

Answer 3

您必须返回两次（使用.parent() ），或使用.parents直到找到li标签。

 $('a').click(function(){ var href = $(this).attr('href'), li = $(this).parents('li'), 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/

但是您可以使用$（this）代替e.target。