如何在单击每个父div时从多个父div获取具有相同id的子div内容

Question

I have multiple divs with same id , i need to get the content of child's div when the parent div is clicked, the divs are dynamically created. The following code explains that :

i have php file that generate the multiple divs with the same id as follows :

<div id="display" style="display: block;">
<div class="display_box" id="display_box" align="left">
<div class="pic"><img src="https://graph.facebook.com/picture"></div>
<div class="picName">Sahrish Rizwan</div>
</div>
 <div class="display_box" id="display_box" align="left">
<div class="pic"><img src="https://graph.facebook.com/picture"></div>           
<div class="picName">Sahil Devji</div>
</div>
<div class="display_box" id="display_box" align="left">
<div class="pic"><img src="https://graph.facebook.com/picture"></div>
<div class="picName">Sahar Imtiaz</div>
</div>
<div class="display_box" id="display_box" align="left">
<div class="pic"><img src="https://graph.facebook.com/picture"></div>
<div class="picName">Sahil Devji</div>
</div>
</div>

now i need to get the content of each display_box through jquery , can any one help me out this ?

Answer 1

Try this (see fiddle console)

$(document).on('click','#display',function(){
    $(this).find('.display_box').each(function(){
       console.log($(this).html()) // returns overall content 
    });
});

DEMO

OR

$(document).on('click','.display_box',function(){
   console.log($(this).html()) // returns clicked content 
});

DEMO