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>

以下の 2 番目の jQuery ステートメントが機能しません。なぜですか?

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

編集: 望ましい動作 -> 最初の div-child (そのコンテンツを含む) が表示されます

4

3 に答える 3

7

<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/

于 2013-10-28T09:38:30.407 に答える
3

要素を閉じていたのではdivなく、新しい div 子を作成していたため、#fields要素に子が 1 つしかありませんでした。

その$('#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また、2 番目のセレクターは、親の最初の子であるすべての子孫要素を選択するため、更新されます#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 に答える