1

这就是 html 结构:(另请参见此处的 jsfiddle:http: //jsfiddle.net/hQ5dZ/

<div id="fields">    
    <div>
        <input type="file" />
        <input type="button" value="+add">
    <div>
    <div> 
        <input type="file" />
        <input type="button" value="+add">
    <div>
</div> 

下面的第二个 jQuery 语句不起作用,为什么?

$('#fields').children().hide();
$('#fields :first-child').show();

编辑:期望的行为 - >应该出现第一个div-child(及其内容)

4

3 回答 3

7

您的标记无效 - 您没有关闭<div>and<input>标记:

<div id="fields">    
    <div>
        <input type="file" />
        <input type="button" value="+add" />
    </div>
    <div> 
        <input type="file" />
        <input type="button" value="+add" />
    </div>
</div> 

将标记更改为有效语法后,它正在工作 - http://jsfiddle.net/teddyrised/nBbxY/

于 2013-10-28T09:38:30.407 回答
3

您没有关闭div元素,而是创建了新的 div 子元素,这导致#fields元素只有一个子元素。

所以$('#fields').children().hide()把孩子藏起来,然后$('#fields > :first-child').show()把它放回去。

<div id="fields">
    <div> <!-- fc-1 -->
        <input type="file" /> <!-- fc-2 -->
        <input type="button" value="+add" />
    </div> <!--not closed-->
    <div>
        <input type="file" /> <!-- fc-3 -->
        <input type="button" value="+add" />
    </div>
</div> <!--not closed-->

$('#fields').children().hide();
$('#fields > :first-child').show();

演示:小提琴

第二个选择器也被更新,因为#fields :first-child将选择其父元素的第一个子元素的所有后代元素#fields,在上面的标记中它将选择所有标记为的字段fc-x

于 2013-10-28T09:38:59.147 回答
3

除了关闭所需的标签之外,您还可以像这样缩短 jQuery 代码,例如:

$('#fields').children().hide().eq(0).show();

在线工作示例:http: //jsfiddle.net/nBbxY/1/

于 2013-10-28T09:43:27.187 回答