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

我正在用jsp打印arraylist。该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>

用户标识符

上面没有写一些结束标记和其他结构，以使我的代码更易于阅读。
基本上，它打印队列中的消息及其在arraylist中的索引：

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

我试过这个：

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

$（文档）.on（'单击'，'未读id'，函数（）{
var index=$（'#index'）.val（）；
$（“#设置索引”）.val（索引）；
});

因此，我单击任何包含消息的div，就会调用脚本，但我总是得到相同的索引值1。 问题是，始终具有相同id名称的相同div会导致我的脚本始终选择id为unread id的第一个div，它始终是第一个div，因此返回1

---

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

向

添加一个类，如

行

，并将脚本更改为以下一个。你的

td

应该看起来像

。另外，不要在输入中使用ID，将其更改为类，如

行输入

JS

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

JSP更改

• 至

• 至

注意

---

您正在为所有行设置相同的

id

。id必须是唯一的，这就是您不断获取相同索引的原因。

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

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

$（函数（）{
$（文档）.on（'单击'，'未读id'，函数（）{
log（$（this.val（））；
});
});








那么，
id
应该是唯一的。这已经是一个问题了。@AlainCruz完全同意你的观点，我的回答中也提到了这一点。然而，即使在这种情况下，这也会起作用（在当前的浏览器中）。这个解决方案在将来可能不起作用，所以我真的建议使用class，而不是在整个页面上复制id。顺便说一句，如果你读了我的答案后使用if
$（这个）
，你的用法就不太好了：）你知道，我只在他的
td
中看到了第一个重复的id，直到我意识到在他的
输入中有另一个
哈哈哈：-）我在投票，因为你确实展示了它。尽管如此，您仍然缺少td的
id
问题，他/她应该解决这个问题。