javascript - jQuery.children は親も選択します

Question

次の HTML があります。

<div id="pic_options_container">
  <div id="pic_options_header">header text</div>
  <div id="pic_options_org"></div>
  <div id="pic_options_preview"><img id="imgPreview" src="" /></div></div>
  <div style="clear:both;"></div>
</div>

私が達成しようとしているのは; pic_options_container をクリックすると、その div の子が非表示になります。ただし、pic_options_container 自体も非表示になります。

$('#pic_options_container').click(function () {
    $(this).children().hide();
});

誰かが解決策を知っているか、私が間違っていることを教えてくれますか?

Answer 1

隠されてよろしいですか？きっと「空」になり、幅と高さが0になります。

これを参照してください：http：//jsfiddle.net/SmSGS/

Answer 2

あなたが試すことができます：

$('#pic_options_container').click(function () {
    $(this).hide(); // to hide container it self, not chldren
});

デモ

ただし、子と両方のコンテナーを非表示にするには:

$('#pic_options_container').click(function () {
    $(this).children().hide().end().hide(); // to hide container it self
});

デモ

無効なマークアップについて

<div id="pic_options_preview"><img id="imgPreview" src="" /></div></div>

最後に余分な締めくくり</div>、それを修正してください。

Answer 3

'pic_options_container' コンテナーが子を持たないか、非表示になっている場合に表示するには、高さと幅を指定する必要があります。