Get variable inside certain div with jquery, when there are multiple divs with same id

user_6883957 0
Viewed 937

I'm printing an arraylist with jsp. Each object inside of that arraylist is printed with a loop like this:

                        <% 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>

Some of the closing tags and other structures are not written above, in order to make my code easier to read.
Basically that prints me messages from a queue, and its index in the arraylist: enter image description here

My problem is that I want to save the index value of any of my messages when I click on them.

I tried this:

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

So I click on any div containing a message, the script is called, but I always get the same index value, 1. Problem is that having always the same div with the same id name, causes that my script always selects the first div with id unread-id, which is always the first one, so it returns 1.

How can I get the index of the clicked div, if all my container divs have the same id value?

spring jsp jquery javascript java
2 Answers

Add a class to your <td id="unread-id"> like row and change your script for the following one. Your td should end up looking like <td class="row">. Also, don't use ids in your inputs, change it to a class, like row-input.

JS

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

JSP Changes

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

Note

You are setting the same id to all your rows. An id must be unique and that is the reason you keep getting the same index.

user_42590320

First - id should be unique in your page. You should really fix this (and if you need some selector to work with multiple elements - you can use classname instead).

However - your code can work (might cause issues with some browsers, so I really advise you to fix this asap):

$(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 />

When inside the click function - the this element is the element you just clicked. You can use that in order to get the value that you need.

user_50375510
Related