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

我有多个具有相同id的div，我需要在单击父div时获取子div的内容，这些div是动态创建的。以下代码说明：

我有一个php文件，它生成具有相同id的多个div，如下所示：

<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>

萨赫里什里兹万
萨希尔·德维吉
萨哈尔·伊姆蒂亚兹
萨希尔·德维吉

现在我需要通过jquery获取每个显示框的内容，有人能帮我解决这个问题吗？

试试这个（请参阅fiddle控制台）

或

---

让多个元素具有相同的

id

的错误做法。使用类。因为它们是动态生成的，并且没有固定数量的div生成，所以我不能为每个类使用不同的id。您可以始终为每个类使用不同的

id

s。在生成

id

时，只需将值1,2…n依此类推。它给出每个显示框的内容，我只想知道div的内容clicked@user3572213我将在回答中对此进行升级。您现在可以告诉我，当用户单击任何显示框时，如何关闭显示div吗？关闭表示您希望在单击显示框时隐藏显示div吗？

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

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

$(document).on('click','.display_box',function(){
   alert($(this).html()) 
});