CODEWITHSUNDEEP
jqueryhtmlcss
Jeak
Jeak

Reputation: 53

How to select this in Jquery?

I have a structure that looks like this:

<div>
 <h3>Hello World</h3>
 <p>Hello</p>
 <ul>
   <li>1</li>
   <li>2</li>
 </ul>
</div>

My question would be, if I clicked on <h3>Hello World</h3> How can I let something happen to the ul in this div, so not in a other div?

Is the ul a sibling from h3 or child? 

$(h3).clicked(function(){
 $(this).???.slideDown();
});

Upvotes: 1

Views: 43

Answers (4)

mk117
mk117

Reputation: 775

Try this... I couldn't get it to animate, although I added the alerts via selectors as per your possible requirement.

 $(document).ready(function(){
 $('body div').each(function(){
	H3div = $(this);
	$('h3', H3div).on('click', function(){
      var demo_alert = $('ul', H3div).text();
      alert(demo_alert);
	});
 });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<body>
<div>
 <h3>Hello World</h3>
 <p>Hello</p>
 <ul>
   <li>1</li>
   <li>2</li>
 </ul>
</div>
</body>

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55750

You could use a combination of nextAll() and first() to target the ul in question.

$('h3').on('click', function() {
   $(this).nextAll('ul').first().slideDown();
});

ul here is a sibling of h3 element as they are at the same level of hierarchy.

Upvotes: 0

Gibbs
Gibbs

Reputation: 22964

    $('h3').click(
        function(event)
       { 
            $(event.target).parent().find('ul li').slideDown();
       }
    );

You have to use on if ul and li are dynamic elements.

Upvotes: 0

Pik_at
Pik_at

Reputation: 1457

Siblings with jquery: 

   $('h3').on('click', function(){
     $(this).siblings('ul').slideDown();
    });

Upvotes: 2

Related Questions