javascript - 当有多个具有相同ID的div时，使用jquery获取某些div内的变量

Question

我正在用 jsp 打印一个数组列表。该 arraylist 中的每个对象都使用如下循环打印:

                        <% ArrayList <MessageObject> list = (ArrayList<MessageObject>) request.getAttribute("list"); %>


                                <%int index = 0;%>
                                <%for(MessageObject msg :list){
                                    index++;
                                    if(mensaje.getState().compareTo("unread") == 0){%>
                                    <tr data-status="unread" class="unread">
                                        <td>
                                            <a href="javascript:;" class="star">
                                                <i class="glyphicon glyphicon-star"></i>
                                            </a>
                                        </td>
                                        <td>
                                            <div class="media">
                                                <h4 class="title">
                                                            User Identifier
                                                </h4>
                                            </div>
                                        </td>                                        
                                        <td id="unread-id">      
                                                <div class="media">
                                                    <p class="summary"><% out.print(msg.getMessage());%></p>

                                                    <input id="index" type="text" value="<%out.print(index);%>"></input>

                                                </div>

为了让我的代码更容易阅读，上面没有写一些结束标签和其他结构。
基本上是从队列中打印消息，以及它在数组列表中的索引:

我的问题是，当我点击它们时，我想保存任何消息的索引值。

我试过这个:

<script>
      $(document).on('click', '#unread-id', function () {
          var index = $('#index').val();
          $("#setindex").val(index);
       });

所以我点击任何包含消息的 div，脚本被调用，但我总是得到相同的索引值 1。问题是总是有相同的 div 和相同的 id 名称，导致我的脚本总是选择第一个具有 id unread-id 的 div，它总是第一个，所以它返回 1。

如果我所有的容器 div 都具有相同的 id 值，我如何获取被点击的 div 的索引？

Answer 1

将类(class)添加到您的 <td id="unread-id">喜欢row并为以下脚本更改您的脚本。你的td最终应该看起来像 <td class="row"> .另外，不要在输入中使用 id，将其更改为类，例如 row-input .

JS

$(document).on('click', '.row', function () {
      var index = $(this).find('.row-input').val();
      $("#setindex").val(index);
});

JSP 更改

• <td id="unread-id">至 <td class="row">
• <input id="index" type="text" value="<%out.print(index);%>"></input>至 <input class="row-input" type="text" value="<%out.print(index);%>"></input>

注意

您正在设置相同的 id到你所有的行。 ID 必须是唯一的，这就是您不断获得相同索引的原因。