jQuery从<ul>列表中检索一个值 - jQuery retrieve a value from a <ul> list

jQuery retrieve a value from a <ul> list

本文关键字：一个检索列表 ul jQuery | 更新日期: 2024-06-29

我有以下脚本来创建名称列表：

setInterval(function() {
    $.ajax({
        type: "GET",
        url: "<?php echo base_url(); ?>cashier/walkin_patient_payments",
        dataType: "JSON",
        success: function(payment_list) {
            pat_payment_list = $('#walkin_patient_payment').empty();
            if (payment_list === null) {
            } else {
                $.each(payment_list, function(i, payment_list) {
                    pat_payment_list.append('<li><a href="#walkin_patient_form" id="walkin_payment_link" class="walkin_payment_link"><i class = "glyphicon glyphicon-user"> </i>' + payment_list.walkin_patient_name + '</a><span style="color:red !important;"> Kshs : ' + payment_list.amount + '</span>'n'
          <input type="hidden" id="walkin_id_list" name="walkin_id_list" class="walkin_id_list" value="' + payment_list.walkin_id + '"/>'n'
    </br></li>');
                });
            }
        },
        error: function(data) {
            //error do something
        }
    });
}, 3000);

附在以下UL列表中：

<ul class = "dashboard-list walkin_patient_payment" id="walkin_patient_payment">
</ul>

但是当我尝试运行以下脚本时，该脚本应该从列表中选择单个walkin id，即使我单击第5个列表，它也只给出第一个列表的值。

下面是脚本：

$('.walkin_patient_payment').on('click', '.walkin_payment_link', function() {
    //get
    var walkin_id = $(this).closest('ul').find('input[name="walkin_id_list"]').val();
    alert(walkin_id);
});

实现这一点的最佳方法是什么？我做错了什么？

这是因为您正在遍历 ul 元素，并且.find('input[name="walkin_id_list"]')将返回 ul 中名称为 walkin_id_list 的所有输入。并且在元素集合上使用.val()将仅返回第一个元素的值。

您需要使用 .closest('li') 而不是 .closest('ul') ：

 var walkin_id = $(this).closest('li').find('input[name="walkin_id_list"]').val();

另请注意，您正在生成具有相同 ID 的元素。ID 应始终是唯一的。您可以改用相同的类。

可以直接在 li 上实现点击

$('.walkin_patient_payment li').click(function () {
            var walkin_id = $(this).find('input[name="walkin_id_list"]').val();
            alert(walkin_id);
});