javascript - 如何使用javascript隐藏ul标签内的div标签

Question

我试图将 div 标签隐藏在 ul 标签内。如果我使用 ul 标签的 id，所有标签都会被隐藏。但我要求显示第一个 div 标签并隐藏其余的 div 标签。

html代码如下:

<ul class="list inputControls ui-sortable" id="inputControlsContainer">
<div id="Radio" class="leaf">...</div>
<div id="Date" class="leaf">...</div>
<div id="Account" class="leaf">...</div>
<div id="Date1" class="leaf">...</div>
</ul>

脚本代码:

<script>
jQuery(document).ready(function () {
var child=document.getElementById("inputControlsContainer").style.display='none';
});
</script>

Answer 1

您可以使用.not() 以及 :first 选择器:

$('#inputControlsContainer').find('.leaf').not(':first').hide();

<小时/>

此外，您的 HTML 目前无效，您需要使用 <li>而不是<div>里面<ul> :

<ul class="list inputControls ui-sortable" id="inputControlsContainer">
    <li id="Radio" class="leaf">...</li>
    <li id="Date" class="leaf">...</li>
    <li id="Account" class="leaf">...</li>
    <li id="Date1" class="leaf">...</li>
</ul>

<强> Fiddle Demo