jQuery的：第一个孩子（没有ID或类）

问题描述：

这是HTML结构：（另见的jsfiddle这里：http://jsfiddle.net/hQ5dZ/）jQuery的：第一个孩子（没有ID或类）

<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孩子（及其内容）应该出现

其在铬中为我工作 –

您希望的行为是什么？ – nnnnnn

第一个div-child应该出现 – Gabriel

答

您没有关闭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所有后代元素，在上述的标记，将选择所有字段标记为fc-x

我给你+1，因为你通过添加'>'来修改选择器，但是你可能想添加一个关于这个的解释。（我知道它没有它，但在我看来它是更正确的。） – nnnnnn

@downvoter我错过了什么 –

答

您的标记是无效的 - 你是不是关闭<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/

哦，天啊！谢谢！ – Gabriel

答

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

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

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

jQuery的：第一个孩子（没有ID或类）

相关推荐