使用 javascript/jquery 循环 <li>答案

【问题标题】：Loop through <li> using javascript/jquery使用 javascript/jquery 循环 <li>
【发布时间】：2021-06-18 16:33:42
【问题描述】：

注意：这是 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());
        });

【问题讨论】：

在循环中生成许多具有相同id 属性的元素会导致错误。 id 必须在整个页面中是唯一的，它们不能重复。 <input type="hidden" id="hidden_receiver_id"
@biesior divs 包含一些要显示的数据，所以显然不会导致错误。请阅读问题并仔细查看代码。
@biesior 这是一个聊天应用程序。因此，要将聊天发送给其他用户，您必须拥有他们的 ID。所以每个用户 ID 都保存在隐藏的输入标签中。
@ObotErnest 你被告知的是正确的。根据定义，元素 ID 是唯一的。就像一个建筑地址；如果 10 个地方有相同的地址，您如何将邮件发送到一个？
在您的each 中使用$(this).find... 并使用通用类名而不是重复ID

标签： javascript php jquery codeigniter codeigniter-3

【解决方案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
});

【讨论】：

我的意思不仅仅是遍历每个
项，我的意思是还要获取每个隐藏的 html 输入标签的值。

` `。所以每个

项目都有一个唯一的 ID 分配给它的隐藏输入标签。