Javascript 如何打印基于foreach语句更改的div的内容？

我有一个名为conversations\u client的ArrayList，我希望能够获得每个div的conversation[6]的值。 media div中的每一个都代表一次对话。 以下是我代码的一部分：

<c:forEach var="conversation" items="${conversations_client}" >
    <div class="media">
        <div class="media-left">
            <input class="checkbox" type="checkbox" name="selected-conv">
        </div>
    <div class="media-body">
         <h4 class="media-heading">${conversation[0]}</h4>
         <span class="hidden">${conversation[6]}</span>
 ......

${conversation[0]}
${conversation[6]}
......

我首先尝试使用以下代码：

<script type="text/javascript">
    $('.media').click(function(){
       var text = $(this).text();
       alert(text);
    });     
</script>

$（'.media'）。单击（函数（）{
var text=$（this.text（）；
警报（文本）；
});     

但它不仅会打印对话[6]，还会打印其他对话，因为他们都在班级媒体的部门内

然后我试了一下：

<script type="text/javascript">
    $('.media').click(function(){
       var text = $('.hidden').text();
       alert(text);
    });             
</script>

$（'.media'）。单击（函数（）{
var text=$（'.hidden'）.text（）；
警报（文本）；
});             

但是它会为所有div打印相同的id，这是第一个div的id

我该怎么做？用标签包装这些媒体div是否更好，以便能够为每个媒体div使用特定的操作？因为我正在显示所有对话，所以一旦用户单击其中一个对话，我就必须恢复其id，以便能够显示该特定对话的消息，并且不建议在jsp中编写Java代码

---

谢谢：）

使用

从当前元素中查找

$('.media').click(function()
    {
        var text = $(this).find('#hidden').text();
        alert(text);
   });

更新：

您正在使用循环来重复标记。根据W3C标准，多次使用
ID
隐藏的
是不好的<代码>ID
应该是唯一的，并且应该在页面中使用一次

对于多种用途，请使用
class
而不是
id
。在这种情况下
class=“hidden”

最好将
${conversation[6]}
更改为
${conversation[6]}

同时更改JS以查找
.hidden

 $('.media').click(function()
    {
        var text = $(this).find('.hidden').text();
        alert(text);
   });

@不客气。单击左侧的勾号图标接受此答案。请注意，不同元素的多个相同id不是标准。您对每个跨度使用了相同的id
隐藏的
。这是不正确的<代码>id
对于每个元素都必须是唯一的。我后来将其更改为类。我没有问题，只是告诉您，就您所知，Sakeys我不知道我不应该在循环中使用id:）谢谢您或欢迎Ouissal:）