当有多个具有相同 id 的 div 时，使用 jquery 在某个 div 内获取变量

Question

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

                        <% 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。 问题是始终具有相同 id 名称的相同 div，导致我的脚本总是选择第一个 id 为 unread-id 的 div，它始终是第一个，所以它返回 1。

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

Answer 1

向您的<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 必须是唯一的，这就是您不断获得相同索引的原因。

Answer 2

First - id 在您的页面中应该是唯一的。你真的应该解决这个问题（如果你需要一些选择器来处理多个元素 - 你可以改用类名）。

但是 - 您的代码可以工作（可能会导致某些浏览器出现问题，所以我真的建议您尽快修复此问题）：

$(function() {
  $(document).on('click', '#unread-id', function () {
    console.log($(this).val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="unread-id" value="1" /><br />
<input id="unread-id" value="2" /><br />
<input id="unread-id" value="3" /><br />
<input id="unread-id" value="4" /><br />

当在 click 函数内时 - this 元素是您刚刚单击的元素。您可以使用它来获得所需的价值。