CODEWITHSUNDEEP
jquerymenujquery-selectorsslidetoggle
Patrioticcow
Patrioticcow

Reputation: 27058

how to use next() to find the closest ul in jquery?

i have a simple menu, something like this:

<ul id="navigation">
    <li id="m_li">
         <div><span>+</span><a href="#" >myself</a></div>
        <ul class="test" id="x_ul">
            <li id="li">
                <a href="#" >Pictures</a>
            </li>
            <li id="li">
                <a href="#" >Audio</a>
            </li>
        </ul>
    </li>
    <li id="profile_modeling_li">
        <div><span>+</span><a href="#" >friend</a></div>
        <ul class="test" id="y_ul">
            <li id="li">
                <a href="#" >Pictures</a>
            </li>
            <li id="li">
                <a href="#" >Video</a>
            </li>
        </ul>
    </li>
</ul>

then i use jquery so when i click on the + sign the ul slides down:

$("#navigation > li > div > span").click(function(){

    if(false == $(this).next('ul').is(':visible')) {
        $('#accordion ul').slideUp(300);
    }
    $(this).next('ul').slideToggle(300);
});

the issue is that $(this).next('ul') doesn't seem to fond the next ul

any ideas what am i doing wrong?

Upvotes: 8

Views: 45520

Answers (3)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

.next / .prev traverse through siblings and ul is not a children of the span. You should probably find closest li and find .test.

 $(this).closest('li').find('ul.test')

Upvotes: 3

gion_13
gion_13

Reputation: 41533

use

$(this).parent().next()

instead of

$(this).next();

and, of course, you can pass a selector (more simple or more complex) that identifies the desired element as argument:

$(this).parent().next('ul.test[id$="_ul]"');

Upvotes: 13

H&#252;seyin BABAL
H&#252;seyin BABAL

Reputation: 15550

Convert 

$(this).next('ul')

to 

$(this).parent().next('ul')

You can see here http://jsfiddle.net/PYqS2/

Upvotes: 1

Related Questions