Как с помощью js вытащить id дива

166

16 декабря 2019, 19:30

Есть несколько дивов(их количество зависит от длинны листа)

 <div class="inbox_chat">
                <c:forEach items="${allLoginUser}" var="user">
                    <div class="chat_list" id="${user.id}">
                        <div class="chat_people">
                            <div class="chat_img"><img src="https://ptetutorials.com/images/user-profile.png"
                                                       alt="sunil"></div>
                            <div class="chat_ib">
                                <h5>${user.login}<span class="chat_date"><% new Date(); %></span></h5>
                                <p>Тут наверное будет последнее сообщение</p>
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </div>

Т.е. получается, что каждый див уникален его id это id пользователя. Я хочу написать js функцию, чтобы мне этот id отправлять на сервак при клике. Вопрос как мне в моей функции получить этот id:

$(document).ready(function () {
       $('#chat_list_ID ???').click(function () {
            //do something
           //send server userName + chat_list_ID на котороый нажали
       });
    });

Answer 1

Вот этот селектор выберет все div с классом chat_list

$('div.chat_list')

$(document).ready(function () { 
   $('div.chat_list').click(function () { 
        let id = this.id; 
        console.log(id) 
   }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="inbox_chat"> 
               
        <div class="chat_list" id="id1"> 
            <div class="chat_people"> 
                <div class="chat_img"><img src="https://ptetutorials.com/images/user-profile.png" 
                                           alt="sunil"></div> 
                <div class="chat_ib"> 
                    <h5>${user.login}<span class="chat_date">111</span></h5> 
                    <p>Тут наверное будет последнее сообщение</p> 
                </div> 
            </div> 
        </div> 
        <div class="chat_list" id="id2"> 
            <div class="chat_people"> 
                <div class="chat_img"><img src="https://ptetutorials.com/images/user-profile.png" 
                                           alt="sunil"></div> 
                <div class="chat_ib"> 
                    <h5>${user.login}<span class="chat_date">111</span></h5> 
                    <p>Тут наверное будет последнее сообщение</p> 
                </div> 
            </div> 
        </div>         
        <div class="chat_list" id="id3"> 
            <div class="chat_people"> 
                <div class="chat_img"><img src="https://ptetutorials.com/images/user-profile.png" 
                                           alt="sunil"></div> 
                <div class="chat_ib"> 
                    <h5>${user.login}<span class="chat_date">111</span></h5> 
                    <p>Тут наверное будет последнее сообщение</p> 
                </div> 
            </div> 
        </div> 
</div>

Answer 2

$(document).ready(function () {
    $('.chat_list').click(function () {
        var id = this.id;
        //send server userName + chat_list_ID на котороый нажали
    });
});

Answer 3

$(document).ready(function () { 
       $('.chat_list').click(function () { 
            //do something 
           //send server userName + chat_list_ID на котороый нажали 
           alert($(this).attr('id')); 
       }); 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="inbox_chat"> 
                    <div class="chat_list" id="user1"> 
                        <div class="chat_people"> 
                            <div class="chat_img"><img src="https://ptetutorials.com/images/user-profile.png" 
                                                       alt="sunil"></div> 
                            <div class="chat_ib"> 
                                <h5>user1<span class="chat_date">date1</span></h5> 
                                <p>сообщение1</p> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="chat_list" id="user2"> 
                        <div class="chat_people"> 
                            <div class="chat_img"><img src="https://ptetutorials.com/images/user-profile.png" 
                                                       alt="sunil"></div> 
                            <div class="chat_ib"> 
                                <h5>user2<span class="chat_date">date2</span></h5> 
                                <p>сообщение2</p> 
                            </div> 
                        </div> 
                    </div> 
            </div>