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

Question

我有一个名为conversations_client 的ArrayList，我希望能够获取每个div 的conversation[6] 的值。 媒体 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>
 ......

我第一次尝试使用此代码：

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

但它不仅会打印对话[6]，还会打印其他内容，因为它们都在带有类媒体的 div 内。

然后我尝试了这个：

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

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

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

谢谢你:)

Answer 1

使用当前元素中的find。

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

更新：

您正在使用循环来重复标记。按照 W3C 标准多次使用 ID hidden 是不好的。 ID 应该是唯一的，并且应该在页面中使用一次。

使用class 而不是id 用于多种用途。在这种情况下class="hidden"

最好将<span id="hidden">${conversation[6]}</span> 更改为<span class="hidden">${conversation[6]}</span>

同样换个JS找到.hidden

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