Как отобразить свернутые элементы родительского списка, если дочерний элемент проверен при загрузке?

Question

У меня есть динамический многоуровневый список, созданный базой данных. При загрузке он скрывает все, кроме элементов первого уровня. Я бы хотел, чтобы он отображал какой-либо родительский элемент при загрузке, если проверен один из дочерних элементов. Я получил его, чтобы показать ближайшего родителя, но не основного родителя.

Мой список настроен так:

<div class="form-row" id="existing-products"> 
    <label class="form_label">Choose products</label> 
    <ul class="product-tree"> 
     <li>Main Product 1 
      <ul> 
       <li class="productList">Sub Product 1 
        <ul> 
         <li class="product"><input type="checkbox" name="prodCode[]" id="prodCodes" class="form_input" value="main1_sub1" checked />main1_sub1</li> 
        </ul> 
       </li> 
       <li class="productList">Sub Product 2 
        <ul> 
         <li class="product"><input type="checkbox" name="prodCode[]" id="prodCodes" class="form_input" value="main1_sub2" />main1_sub2</li> 
        </ul> 
       </li> 
      </ul> 
     </li>    
     <li>Main Product 2  
      <ul> 
       <li class="productList">Sub Product 1 
        <ul> 
         <li class="product"><input type="checkbox" name="prodCode[]" id="prodCodes" class="form_input" value="main2_sub1" />main2_sub1</li> 
        </ul> 
       </li> 
      </ul> 
     </li>    
    </ul> 
</div> 

Мой скрипт для переключения списка является:

<script language="JavaScript" type="text/javascript"> 
$(document).ready(function() { 
    var plus = $('<span> + </span>').addClass('plus'); 
    $('.product-tree li').has('ul').addClass('has-child') 
    plus.prependTo('.has-child'); 
    $(".has-child").hover(
     function() { 
      $(this).addClass('hover'); 
     }, 
     function() { 
      $(this).removeClass('hover'); 
     } 
    ); 
    $('.has-child ul').hide(); 
    $('.product-tree input:checked').each(function(){ 
     $(this).parent().show(); // Does nothing? 
     $(this).parent().parent().show(); // Will show Sub Product 1 when Main product 1 is clicked 
     $(this).parent().parent().parent().show(); // Does nothing 
    }); 

    $('.has-child .plus').click(function(){ 
     $(this).parent().children("ul").toggle('slow'); 
    }); 

}); 
</script> 

Answer 1

изменить это:

$('.product-tree input:checked').each(function(){ 
    $(this).parent().show(); // Does nothing? 
    $(this).parent().parent().show(); // Will show Sub Product 1 when Main product 1 is clicked 
    $(this).parent().parent().parent().show(); // Does nothing 
}); 

к:

$('.product-tree input:checked').each(function(){ 
    $(this).parents().show(); // show all parent elements 
}); 

Answer 2

Это работает?

if($('.product-tree').find('input').is(':checked')) { 
    $(this).parents().show(); 
}