jquery toggle parent parent li?

Question

I have html with a submenu inside another submenu. What i want is on page load if a sub sub li has the class turnedon for the parent to toggle and its parent to toggle, so the li containing the li with class turned on are all visible..

HTML:

<ul class="NewsSubMenu">
   <li class="NewsSubMenuOn" style="margin-left:-1.7px;">
      <span style="padding-left:35px; color:White;">  News Archive</span>
       <ul class="NewsArchive">
           <li class="off">
           <a href="#" class="year">2012</a>                
                <ul class="NewsMonths">
                        <li class="off">
                           <a href="#" class="month">March</a> 
                              <ul class="NewsArt">
                                         <li class="turnedon">
                                          News Headline
                                       </li>
                                </ul>
                        </li>
                        <li class="off">
                           <a href="#" class="month">February</a> 
                              <ul class="NewsArt">
                                       <li>
                                          Title                                        </li>
                                </ul>
                        </li>
                </ul>
           </li>
           <li class="off">
           <a href="#" class="year">2011</a>                
                <ul class="NewsMonths">
                        <li class="off">
                           <a href="#" class="month">March</a> 
                              <ul class="NewsArt">
                                       <li>
                                         PVC4PIPES
                                       </li>
                                </ul>
                        </li>
                </ul>
           </li>
       </ul>   
      </li>
    </ul>

CsS:

.NewsSubMenuOn ul li.off ul {
display:none;

}

jquery:

  $(document).ready(function () {
    $(".turnedon").parent().parent().toggle();
});

my jquery isnt working?

Answer 1

Try this one:

$(document).ready(function () {
    $(".turnedon").parents('ul').toggle(true);
});​

You can check it here http://jsfiddle.net/KwdmZ/

Answer 2

Walk up the dom tree, showing parent elements until your element is visible:

var target = $(".turnedon").show();
var parent = target.parent();
while(target.is(":hidden")) {
    parent.show();
    parent = parent.parent();
}

Demo: http://jsfiddle.net/4arWQ/

Answer 3

Try specifying what parent types it should look at:

 $(document).ready(function () {
    $(".turnedon").parent('ul').parent('ul').toggle();
});

If you look at your code paths if you go parent().parent() your selecting the ahref with class month.