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();

编辑：所需行为 - ＆gt;应该出现第一个div-child（及其内容）

Answer 1

您的标记无效 - 您没有关闭<div>和<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();

演示：Fiddle

此外，第二个选择器已更新，因为#fields :first-child将选择#fields的所有后代元素，这些元素是其父级的第一个子元素，在上面的标记中，它将选择标记为{{1}的所有字段}

Answer 3

除了关闭所需的标签之外，你可以缩短你的jQuery代码，例如：

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

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

jQuery：first-child（没有id或class）

3 个答案: