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元素。找到LI元素，它是被单击的A元素的父元素，然后搜索作为该LI元素的子元素的轮播。

Answer 2

使用这个，轮播是一个不同的元素

$('.carousel')

Answer 3

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

顺便说一句，你的剧本也适用于我：
https://jsfiddle.net/rozgwq8e/

但您可以使用$（this）而不是e.target。

jQuery上升一级和.find（）

3 个答案: