HTMLとJQuery上の子要素の選択

Question

私は以下の2行のコードを複数のループで実行しています。

<label class="price"> 
    <em>Dynamic Value</em> 
    <label class="price-actual" hidden>Actual Dynamic Value/label> 
</label> 

jquery関数。

$('body').on('click', '.price', 
    function (e) { 
     var actualClicked = $(e.target); 
     var clicked = actualClicked.children(".price-actual"); 
     alert(clicked.text()); 
    } 
); 

私の要件は、私は価格ラベルをクリックして、これまで、それはその子クラスから実際の動的な値の値を警告するときです。

私は上記のコードを実行しており、うまく動作しません。私にそれを乗せてください。

<div class="price"> 
    <em>Dynamic Value</em> 
    <label class="price-actual" hidden>Actual Dynamic Value</label> 
</div> 

とjQuery：

Answer 1

をして、あなたのHTMLコードを交換してイベントがトリガされたところから、あなたが得る要素に$(this)を使用することができます

$('body').on('click', '.price', 
    function (e) { 
     var actualClicked = $(this); 
     var clicked = actualClicked.children(".price-actual"); 
     alert(clicked.text()); 
    } 
); 

Answer 2

。

$('body').on('click', '.price', 
 
    function (e) { 
 
     alert($(this).children(".price-actual").text()); 
 
    } 
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<label class="price"> 
 
    <em>Dynamic Value</em> 
 
    <label class="price-actual" hidden>Actual Dynamic Value</label> 
 
</label>

Answer 3

このコード

<label class="price"> 
<em>Dynamic Value</em> 
<label class="price-actual" hidden>Actual Dynamic Value</label> 
    </label> 
<br> 
<label class="price"> 
<em>Dynamic Value</em> 
<label class="price-actual" hidden>Actual Dynamic Value</label> 
      </label> 
       <br> 
     <label class="price"> 
<em>Dynamic Value</em> 
<label class="price-actual" hidden>Actual Dynamic Value</label> 

とJS

$(document).on('click', '.price', 
function (e) { 
console.log('a'); 
    var element= $(this); 
    var vale = element.closest('.price').find('.price-actual').text(); 
    alert(vale); 
} 
    );