javascript - 2つのフォームのうち、アクティブなdivにあるものをjqueryで選択

Question

次のように、2 つの別々の div にネストされた 2 つのフォームがあります。

<div id="div1" style="display:block">
    <form name="form">
</div>

<div id="div2" style="display:none">
    <form name="form">
</div>

フォームは基本的にタブ内にあるため、タブを切り替えると div がアクティブになり、フォームもアクティブになります。もう一方の div はそのスタイル属性を に変更しstyle="display:none"、フォームは非アクティブになります。今、アクティブな div にあるフォームを選択しようとしています。何か案は？

Answer 1

:visibleセレクターを使用します。

フィドル

var form = $('div:visible form[name=form]');

オブジェクトの代わりにフォーム HTML が必要な場合:

var formHTML = $('<div>').append($('div:visible form[name=form]').html()).html();

これは、目に見える div に含まれるフォームを選択し、フォームの外側の HTML を取得します。

Answer 2

MrCode が述べたように :visible を使用できますが、単に

 var form = $('#div2 > form');

あなたのコードで、アクティブな div id がわかっている場合は、これを行います。

Answer 3

表示されるセレクターについては、 jQueryのドキュメントを参照してください。