クリックした現在の要素のIDを取得する方法

Question

クリックする現在の要素の値を取得します。 私はチェックボックスのリストを持っていて、それぞれのIDを取得したいのですが、それは隠されています。次のように私のコードが行く ：

$("#ModelListView").on("click", ".ModelCheckBox", function (element) { 
    var AnalysisID = $("#AnalysisID").val(); 
    var ModelID = ''; 
}); 

HTML：

<div id="ModelListView"></div> 
<script type="text/x-kendo-template" id="Modeltemplate"> 
    <div class="section group fr"> 
     <div class="col span_2_of_12"> 
      #if(ACTIVE_MODELS_COUNT > 0){# <input class="ModelCheckBox" type="checkbox" checked/>#} else {# <input class="ModelCheckBox" type="checkbox" unchecked/> #}# 
     </div> 
     <div class="col span_4_of_12"><label>#:MODEL#</label></div> 
     <input id="Model_ID" type="hidden" value=#:MODEL_ID#/> 
    </div> 
    </script> 

私は隠された保持されMODEL_IDの値を取得したいです。

Answer 1

$(this)を使用して、最も近いものを取得できます。

$(this)がクリックされた要素になります。

.closest('.section.group')は "section group" -divを返します。の代わりに#ModelListViewを使用します。 section.group。

.find('#Model_ID').val()は、非表示フィールドの値を返します。

$("#ModelListView").on("click", ".ModelCheckBox", function (element) { 
 
    var AnalysisID = $("#AnalysisID").val(); 
 
    var ModelID = $(this).closest('.section.group').find('#Model_ID').val(); 
 
    alert(ModelID); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="ModelListView"> 
 
    <div class="section group fr"> 
 
     <div class="col span_2_of_12"> 
 
      <input class="ModelCheckBox" type="checkbox" checked/> 
 
     </div> 
 
     <div class="col span_4_of_12"><label>Label</label></div> 
 
     <input id="Model_ID" type="hidden" value="someValue"/> 
 
    </div> 
 
    </div>

追記：テンプレートでIDを使用して注意してください。