javascript - 指定したフォーム内のすべての DOM を非表示にすることは可能ですか?

Question

1つ（凡例）を除いて、フォーム内のすべての要素を非表示にしようとしています。

 <form class="common">
   <fieldset>
    <legend>General Info</legend>
    <div class="group">
    <label>First:
        <input type="text"/>
    </label>
    <label>Middle:
       <input type="text"/>
    </label>
    <label>Last:
        <input type="text"/>
    </label>
    <label>Age:
        <input type="text"/>
    </label>
   </fieldset>
   <fieldset>
    <legend>General Info</legend>
    <div class="group">
    <label>First:
        <input type="text"/>
    </label>
    <label>Middle:
        <input type="text"/>
    </label>
    <label>Last:
        <input type="text"/>
    </label>
    <label>Age:
        <input type="text"/>
    </label>
   </fieldset>

クリックするとそのフィールドセット要素を表示したい各フィールドセットの凡例を除いて、フォーム内のすべてを非表示にしようとしています。

どうすればこれを達成できるか知っている人はいますか?

これを取得して、一度に 1 つのフィールドセットのみを開くことができればボーナスです。

ありがとう、

マーク

Answer 1

この簡単なデモを試してみてください。仕事をする必要があります (一度に 1 つのフィールドセットのみを表示します)。

function hideAll(){
    $("fieldset > :not(legend)").hide();
}

hideAll();

$("fieldset").click(function(){
    hideAll();
    $(this).children().show();
});

http://jsfiddle.net/VYwut/2/

Answer 2

これにより、 withの下のすべてfieldsetのノードが非表示になります。divclass="common"

$('.common > fieldset > :not(legend)').hide();