イベントをトリガーしたdivの入力を取得するにはどうすればよいですか？

Question

基本的には、ネストされた入力を取得するために「this」プロパティを使用します。

私はフォームデータを持つブートストラップを使用して折りたたみ可能な要素のグループを持っています。ユーザーがdivを折りたたむたびにnullデータをチェックしたい。私はイベントをトリガするためにJQueryを使用しましたが、イベントをトリガしたdivから入力を取得する方法はわかりません。

<div id="accordion" class="panel-group"> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#Q1-body"> 
     Question Group 1 
     </a> 
    </div> 
    <div id="Q1-body" class="panel-collapse collapse in"> 
     <div class="panel-content"> 
     <input type="text" name="Q1"></input> 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#Q2-body"> 
     Question Group 1 
     </a> 
    </div> 
    <div id="Q2-body" class="panel-collapse collapse"> 
     <div class="panel-content"> 
     <input type="text" name="Q2"></input> 
     </div> 
    </div> 
    </div> 

ユーザーが一度入力した入力を確認するようにJQueryを設定しました。

<script> 
    $(document).ready(function(){ 
    $(".collapse").on('hidden.bs.collapse',function(){ 
     var i = 0; 
     $(this + ":input").each(function(){ 
     //some code 
     }); 
    }); 
}); 
</script> 

私はこれを試してみるとエラーになります。

Answer 1

あなたは文字列でDOM要素（this）を連結しようとしている「：入力」とし、jQueryのセレクタとしてそれを使用。 （つまり、$(this + ":input")の行で何をしているのか）。動作しません。 thisは、collapseクラスを運ぶ要素になります。そのため、入力した内容は子になります。

<script> 
    $(document).ready(function(){ 
    $(".collapse").on('hidden.bs.collapse',function(){ 
     var i = 0; 
     $(this).find(":input").each(function(){ 
     //some code 
     }); 
    }); 
}); 
</script> 

Answer 2

jqueryセレクタは有効ですか？これを試すことができます。

$(this).find(':input').each(function(){ 
    //some code 
}); 

Answer 3

jQueryのは、このような二番目のパラメータを受け入れることができ、次のような

何かがあなたが後にしているより多くのものをする必要があります。したがって、thisをこのように使用することができます。

コードスニペット：

$(".collapse").on('hidden.bs.collapse',function(){ 
    var i = 0; 
    $(":input", this).each(function(){ 
    //some code 
    }); 
});