<li> 使用 javascript/jquery 循环

Question

注意：这是Php、Javascript和html的混合体

我有一个低于的代码

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

我想要的是，当你点击每个<li>项目时，你应该能够从输入标签<input type="hidden" id="hidden_receiver_id" name="hidden_receiver_id" value="<?php echo $all_maid->id?>"/>中获得ID。

那么，我如何循环<li>项目并从输入标签中获取每个项目的ID呢？

我尝试了下面的东西，但不起作用

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

使用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

答案是

我将class="hidden_receiver_id"添加到<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()) 
});