I'm learning jquery and i have this little issue with selectors.

This is my DOM structure:

 <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. Its a simple list with a lot of links with my works. every item has its description and some pictures that goes on a carousel.

when I click on the link, i want to create a variable in jquery that get the carousel. I write this but it doesnt work:

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

Thanks for help!

I'm learning jquery and i have this little issue with selectors.

This is my DOM structure:

 <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. Its a simple list with a lot of links with my works. every item has its description and some pictures that goes on a carousel.

when I click on the link, i want to create a variable in jquery that get the carousel. I write this but it doesnt work:

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

Thanks for help!

• javascript
• jquery
• html

• use parent() to go 1 level up – Mike B Commented Nov 26, 2016 at 19:42
• I tried your code and it works. Your way is also arguably better than the answers here, so I would stick with it. Are you sure the HTML in your example matches the structure of your page? – dlsso Commented Nov 26, 2016 at 22:04

3 Answers 3

This should work:

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

Inside the click handler, "this" refers to the A-element which was clicked. Find the LI-element which is the parent of the A element which was clicked and then search for the carousel which is a child element of that LI element.

use this instead, carousel its a diferent element

$('.carousel')

You have to go back (with .parent()) twice or use .parents until it finds the li tag.

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

by the way, your script works for me as well:
https://jsfiddle/rozgwq8e/

but you could use $(this) instead of e.target.