CODEWITHSUNDEEP
jquery
kylex
kylex

Reputation: 14406

jQuery list hide/show based on current class

I want to display the entire ul li struct that has a class current somewhere in it

Every other ul li I want to hide. EXCEPT The top level.

My jQuery is not doing what I want, any suggestions?

$("ul li").find("ul").hide();
$("ul:has(li.current)").parents().show();
$("ul:has(li.current)").children().show();

For example:

<ul>
    <li>Entire struct is displayed
        <ul>
            <li>1.1
                 <ul>
                     <li class="current">1.1.1</li>
                 </ul>
            </li>
            <li>1.2</li>
        </ul>
    </li>
    <li>Only this li is shown
        <ul>
            <li>2.1</li>
            <li>2.2</li>
        </ul>
    </li>
</ul>

Displays as:

EDIT: added children to jQuery, but still not working as desired.

Upvotes: 1

Views: 748

Answers (1)

Quintin Robinson
Quintin Robinson

Reputation: 82325

The following worked for me..

$("ul").find("ul").hide();
$("ul > li.current").find("ul").show().end().parents().show();

http://jsfiddle.net/uHyPS/5/

Upvotes: 2

Related Questions