Jquery - 親divをクリックしたときに子の値にアクセスする

Question

テーブルの代わりにdivsを使用してストライプテーブルを作成しました（私はテーブルが嫌いです）。私がdivの1つをクリックすると、そのchilds値の1つを取得できるようにしたいと思います。

<div class='row'><!-- I want to click this div --> 

     <p>I want this value</p> 

     <p>some other val</p>    

    </div> 

    <div class='row'> 

     <p>I don't want this one</p> 

     <p>some other val</p>    

    </div> 

回答がある場合は教えてください。もちろん

Answer 1

$('.row').click(function(){ 
    var value = $(this).find('p').eq(0).text(); 
}); 

、あなたはおそらく、内部find()セレクタを修正するためにあなたの内側の値が少し良くマークしたいと思うでしょう。例：

<div class="row"> 
    <span class="row-value">35</span> 
    <p>Some descriptive text</p> 
</div> 
<div class="row"> 
    <h1>Cool header</h1> 
    <span class="row-value">5</span> 
</div> 

次に、$(this).find('.row-value').text()を使用して、セレクタが壊れていないかどうかを確認できます。このような

Answer 2

何か：

$(".row").click(function(){ 
    var grabbedValue = $("> p:eq(0)", this).text(); 
    // do something with grabbedValue; 
}); 

Answer 3

あなたがpタグにクラスを置くことができるならば、これは簡単だろう。

<div class='row'><!-- I want to click this div --> 
     <p class="selectable">I want this value</p> 
     <p>some other val</p>    
    </div> 
    <div class='row'> 
     <p>I don't want this one</p> 
     <p class="selectable">some other val</p>    
    </div> 
$('.row').click(function(){ 
    $(this).children(".selectable").function(); 
}) 

Answer 4

$('.row').click(function(){ 
    console.log($(this).children('p').text()); 
}); 

Answer 5

$('.row').click(function(){ 
    $('p', this).each(function(){ 
     alert($(this).text()); 
    }); 

}); 

Answer 6

$('.row p').bind('click', function(){ 
    this.value; 
});