javascript - jQuery：第一个孩子（没有 id 或类）

Question

这就是 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（及其内容）

Answer 1

您的标记无效 - 您没有关闭<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/

Answer 2

您没有关闭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

Answer 3

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

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

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