CODEWITHSUNDEEP
jqueryobject
PapaHotelPapa
PapaHotelPapa

Reputation: 697

How do I extract only the first element from a jQuery object?

I have a menu with two submenus that animate by sliding open when the user clicks on the appropriate menu heading. That function is provided by this code:

$('ul#main_menu > li:has( ul.sub-menu )').click(function()
    {
        var $sublist = jQuery(this).find('ul:first');
        $sublist.slideToggle('fast');

        return false;
    });

Now, I want to make the first submenu open when the user clicks on a span that I've set up (it has an id of open_artists. I've been trying to modify the above code to accomplish that. This works, but opens both submenus. I only want to open the first submenu.

function openArtists () {

        var $sublist = jQuery('ul#main_menu > li:has( ul.sub-menu )').find('ul:first');
        $sublist.slideToggle('fast');

        return false;

}

$('#open_artists').click(openArtists);

I've tried to modify it to:

function openArtists () {

        var $sublist = jQuery('ul#main_menu > li:has( ul.sub-menu )').find('ul:first');
        var $firstsublist = jQuery('$sublist').first();
        $firstsublist.slideToggle('fast');

        return false;

}

$('#open_artists').click(openArtists);

But this isn't working. Nor has anything else I've tried.

Upvotes: 0

Views: 72

Answers (1)

Mohamad Shiralizadeh
Mohamad Shiralizadeh

Reputation: 8765

You should select first ul then find the sublist

function openArtists () {

        var $sublist = jQuery('ul#main_menu > li:has(ul.sub-menu)').find('ul').eq(0);
        $sublist.slideToggle('fast');

        return false;

}

Upvotes: 2

Related Questions