CODEWITHSUNDEEP
javascriptjqueryhtmlcss
NominalAeon
NominalAeon

Reputation: 604

I need to exclude children from a find()

HTML:

<ul>
    <li class="listExpandTrigger"><h3>2010 - present</h3></li>
    <li class="listCollapseTrigger"><h3>2010 - present</h3></li>
    <li>
    <ul class="volumeList">
        <li class="listExpandTrigger"><h3>Volume 13</h3></li>
        <li class="listCollapseTrigger"><h3>Volume 13</h3></li>
        <li>
        <ul class="issueList">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </ul>
    </li>
</ul>

CSS:

.listCollapseTrigger, .volumeList, .issueList{
    display: none;
}

JS:

$( 'body' ).on( 'click', '.listExpandTrigger', function(){
    $( this ).parent().find( 'ul' ).css( 'display', 'block' );
    $( this ).parent().find('.listExpandTrigger').css('display', 'none');
    $( this ).parent().find('.listCollapseTrigger').css('display', 'block');
});

I realize there are more steps to complete with the Javascripts, but I'm having issues right out of the gate. I need to exclude children classes and ul's or only affect the first instance of the thing it's told to find(). Right now the function affects everything inside the parent of the trigger, which makes sense. I'm just not sure how to fix it. Thanks!

Upvotes: 2

Views: 181

Answers (2)

k.odell
k.odell

Reputation: 46

Why not use the .next() method with a ul selector?

$(this).next("ul").css( 'display', 'block' );

Upvotes: 2

John Koerner
John Koerner

Reputation: 38077

Use first:

$( this ).parent().find( 'ul' ).first().css( 'display', 'block' );

Upvotes: 4

Related Questions