I need to exclude children from a find()

Question

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!

[This thread](http://stackoverflow.com/questions/977883/selecting-only-first-level-elements-in-jquery) seems to cover the topic. — Giacomo1968, Jan 24 '13 at 17:43

score 4 · Accepted Answer · answered Jan 24 '13 at 17:42

4

Use first:

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

answered Jan 24 '13 at 17:42

John Koerner

37,428
8
84
134

score 2 · Answer 2 · answered Jan 24 '13 at 17:45

2

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

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

answered Jan 24 '13 at 17:45

k.odell

46
3

Thanks for the response, this was equally helpful. I'm going with the first() function simply because I think it makes the code more self-explanatory. Otherwise I got both of these ways (_first_ and _next_) to work, they're both equally good solutions. – NominalAeon Jan 24 '13 at 18:08
I think using first() might introduce more problems later. Let's say you add two more Volumes to your "volumeList" ul, now you have 12, 13, and 14. If you click the expander for Volume 13, it's going to incorrectly expand the issues on Volume 12. .next() seems to match the functionality better but I might be misunderstanding where you're going with this project. – k.odell Jan 24 '13 at 18:22

I need to exclude children from a find()

2 Answers2