Javascript 如何通过检查 内联样式将样式 ="display:none"添加到 ？

Question

Javascript 检查如何添加 style="display:none"至 <div>通过检查 <li>内联样式？

• 按照上面的代码默认所有<li>有style="display:none" .
• 现在我希望 javascript 应该检查所有 <li>作为style="display:none" .
• 如果全部<li>有style="display:none"然后<div>食物也呈现为 <div style="display:none">食物

HTML code:

<div> Food <!-- Main Category -->
	<ul> 
	     <li style="display:none"> Pizza </li>				<!-- Category Child Item -->
	     <li style="display:none"> Falafel </li>				<!-- Category Child Item -->
	     <li style="display:none"> Donuts </li>				<!-- Category Child Item -->
	     <li style="display:none"> Burger </li>				<!-- Category Child Item -->
	     <li style="display:none"> Cheese Sandwich </li>		<!-- Category Child Item -->
	</ul>

</div>

Require - HTML code output by javascript:

<div style="display:none"> Food <!-- Main Category -->
	<ul> 
	     <li style="display:none"> Pizza </li>				<!-- Category Child Item -->
	     <li style="display:none"> Falafel </li>				<!-- Category Child Item -->
	     <li style="display:none"> Donuts </li>				<!-- Category Child Item -->
	     <li style="display:none"> Burger </li>				<!-- Category Child Item -->
	     <li style="display:none"> Cheese Sandwich </li>		<!-- Category Child Item -->
	</ul>
</div>

Answer 1

是这样的吗？

var allHidden = true;
$("#food ul li").each(function(){
    if($(this).is(":visible")){
        allHidden = false;
    }
});

if(allHidden){
   $("#food").hide();       
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="food"> Food <!-- Main Category -->

	<ul> 
		<li style="display:none"> Pizza </li>				<!-- Category Child Item -->
		<li style="display:none"> Falafel </li>				<!-- Category Child Item -->
		<li style="display:none"> Donuts </li>				<!-- Category Child Item -->
		<li style="display:none"> Burger </li>				<!-- Category Child Item -->
		<li style="display:none"> Cheese Sandwich </li>		<!-- Category Child Item -->
	</ul>

</div>