Calling a class within Jquery

Question

I want to call a class within jquery.

<nav class="small-nav">
<ul>
<li><a href="#">Home</a></li> </ul>
</nav> <!-- End of small-nav -->

<script>$('.handle').on('click', function() 
{$('nav .small-nav ul').toggleClass('open'); 
});
</script>

However this doesn't work. I've tried replacing as

$('small-nav ul') or $('.small-nav ul') or $("nav '.small-nav' ul")
or $('nav.small-nav ul')

and it doesn't seem to work.

I know the code is fine because when I remove the class from the nav and when I call just the nav ul as shown below, it works.

<nav>
<li><a href="#">Home</a></li>
</nav>

<script>$('.handle').on('click', function() 
{$('nav ul').toggleClass('open'); 
});
</script>

So can someone please tell me how I can call the specific class? Or is it not working because I am trying to call a class within another class (open) ? How do I fix it so that I can call that particular nav class and not all nav in my website.

Thanks for reading.

there is no ul in your markup.. so use <nav class="small-nav"> <ul> <li><a href="#">Home</a></li> </ul> </nav> then $('nav.small-nav ul') — Arun P Johny
– Arun P Johny, Commented Jul 2, 2014 at 6:17
Sorry I forgot to add the ul when posting, I'll edit it now. — Gosi
– Gosi, Commented Jul 2, 2014 at 6:22

chandu · Accepted Answer · 2014-07-02 06:31:39Z

1

Try with find(); like this

<script>
$(document).ready(function(){
  $('.handle').on('click', function(){
    $('nav.small-nav').find('ul').toggleClass('open'); 
    });

})

</script>

Jquery doc

answered Jul 2, 2014 at 6:31

chandu

2,2763 gold badges23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Moeed Farooqui · Accepted Answer · 2014-07-02 06:18:05Z

0

$('nav > .small-nav ul').toggleClass('open');

answered Jul 2, 2014 at 6:18

Moeed Farooqui

3,6281 gold badge20 silver badges23 bronze badges

Comments

Rory McCrossan · Accepted Answer · 2014-07-02 06:22:15Z

0

Your jQuery does not work because you are looking for the .small-nav element inside the nav (nav .small-nav), not a .nav element which has that class (nav.small-nav). Try this:

<nav class="small-nav">
    <ul>
        <li><a href="#">Home</a></li>
    </ul>
</nav>

<script type="text/javascript">
    $('.handle').on('click', function() {
        $('nav.small-nav ul').toggleClass('open'); 
    });
</script>

This code is obviously assuming that you have an element with the class handle in your code - as it is not shown in your OP example.

answered Jul 2, 2014 at 6:22

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

4 Comments

Gosi Over a year ago

Yea I already have the ul. I forgot to type it out here. Edited my original post. Sorry.

Gosi Over a year ago

Yea I do have the handle class. Just that i forgot to add to here again, lol. But this new one still doesn't work. I've tried this.

Rory McCrossan Over a year ago

@gosi123 have you checked the console for errors? Is jquery.js included in your page?

Gosi Over a year ago

I used the jquery from google developers, so basically I just pasted the link to my head section. I think the whole code is fine, because if I remove all classes in nav , it works. I just want to call a specific nav instead of all nav.

Milind Anantwar · Accepted Answer · 2014-07-02 06:34:20Z

0

Your first solution didnt worked because you have wrong selector for targetting nav with class small-nav. also ensure that events are attached when dom isready.You need to use:

<script>
$(function(){
$('.handle').on('click', function(){    
$('nav.small-nav ul').toggleClass('open'); 
});
});

edited Jul 2, 2014 at 6:34

answered Jul 2, 2014 at 6:17

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

1 Comment

Gosi Over a year ago

I used the google web developers jquery code. I pasted the link to my head section.

Collectives™ on Stack Overflow

Calling a class within Jquery

4 Answers 4

Comments

Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related