依次通过<li>使用 javascript/jquery</li>

Question

Note: This is a mixture of Php, Javascript and html.

I have a code below

            <div class="chat-sidebar-list-wrapper pt-2">
                <h6 class="px-2 pt-2 pb-25 mb-0">MAIDS</h6>
                <ul class="chat-sidebar-list  maid-list-wrapper">
                <?php
                    foreach($all_maids as $all_maid){
                        ?>
                    <!-- displaying looped results in <li> using php foreach method-->
                    <li id="<?php echo $all_maid->id?>" class="bingo">
                     <input type="hidden" id="hidden_receiver_id" name="hidden_receiver_id" value="<?php echo $all_maid->id?>"/>
                        <div class="d-flex align-items-center">
                            <div class="avatar m-0 mr-50"><img src="<?php echo base_url('uploads/'); ?>images/<?php echo get_user_image($all_maid->id)?>" height="36" width="36" alt="sidebar user image">
                                <span class="avatar-status-busy"></span>
                            </div>
                            <div class="chat-sidebar-name">
                                <h6 class="mb-0 maid-names"><?php echo $all_maid->first_name. "" . $all_maid->last_name ?></h6><span class="text-muted">Maid</span>
                            </div>
                        </div>
                    </li>
                    <?php } ?>
                </ul>
              .......
            </div>

What i want is, when you click on each <li> items, you should be able to get the ID from the input tag <input type="hidden" id="hidden_receiver_id" name="hidden_receiver_id" value="<?php echo $all_maid->id?>"/> .

So how can i loop the <li> items and get each of it IDs from the input tag?

I tried something below but not working

        var listItems = $(".maid-list-wrapper li");
        listItems.each(function(idx, li) {
            //var id = $(li).text();
            alert($("li.bingo").find("input#hidden_receiver_id").text());
        });

Answer 1

Using jQuery

var items = $(".chat-sidebar-list li");
items.each(function(id, li) {
    var OneItem = $(li);
    // and the rest of your code.OneItem is an object here
});

Answer 2

The answer is

i added class="hidden_receiver_id" to <input type="hidden" id="hidden_receiver_id" class="hidden_receiver_id" name="hidden_receiver_id" value="<?php echo $all_maid->id?>"/>

        $('.maid-list-wrapper li').click(function() {
            //name of each user
            console.log($(this).find("h6.maid-names").text());

             //ID of each user
            //alert($(this).find("input[type='hidden']").val());
            console.log($(this).find("input.hidden_receiver_id").val()) 
        });