前言

最近在学jQuery，今天来讲讲如何在web上利用jQuery动态生成列表，并对其每一个item做监听。

获取列表并对其进行遍历

一般的业务逻辑都是通过网络请求从后台中获取一个列表，在java中一般使用list存储。在js中就是一个数组了。

$.ajax({
        type:"POST",
        data:{userId:userId},
        url:server+"/order/getOrderByUserId",
        success:function (result) {
            if(result.code==200){
                createOrders(result.resultMap.list);
            }else{
                console.log(result);
                // showCommonModal(result.message);
            }
        },
        error:function (e) {
            alert("服务器异常,请稍后重试...");
        }
    });

这里我使用的是Ajax请求，result.resultMap.list就是我们所需要的列表集合了。

$.each(list,function (index,value) {
  ...
});

通过jQuery的$.each()就可以实现集合的遍历效果了，第一个参数list就是我们刚刚提到的列表集合，第二个参数传入一个函数，index是这个集合的下标（即0、1、2、3...），value是index对应的对象值。

通过集合遍历动态生成html

有了上述的遍历基础就可以正式通过遍历动态生成列表了。

• 首先我们需要在html中编写一个div作为整个个动态生成列表的容器：

  <div class="content"></div>

• 然后我们需要在遍历前创建一个变量：

  var item="";

• 遍历的时候通过往该变量添加html：

   items+='<div class="container-fluid bg-white mt-2 item" id='+value.id+'>'+
              '<div class="row pt-2">'+
                  '<div class="col-8">' +
                      '<i class="fa fa-calendar mx-2" aria-hidden="true"></i><p class="d-inline-block date">'+value.createTime+'</p>'+
                  '</div>' +
                  '<div class="col-4"><p class="text-warning text-right align-items-center state">'+stateTxt+'</p></div>'+
                  '</div>' +
          '<div class="border-bottom"></div>' +
          '<p class="text-dark mt-2 books">'+value.bookName+'</p>'+
          '<div class="border-bottom"></div>' +
              '<div class="row mt-2">' +
                  '<div class="col-4 offset-8 text-right">合计:<i class="fa fa-jpy" aria-hidden="true"></i><p class="d-inline-block price">'+value.totalPrice+'</p></div>'+
              '</div>' +
          '</div>';
  

• 最后通过append添加到之前定义的容器div中：

  $(".content").append(items);
  注：我们可以通过在div中添加自定义属性来存放我们在item监听中可能用到的数据：

items+='<div class="container-fluid bg-white mt-2 item" id='+value.id+'>'+

上述的id='+value.id+'就是一个自定义属性，当我们需要取出使用时可以通过以下写法来获取刚刚存进去的值：

var id=$(this).attr("id");

这样就完成了整个列表的动态生成了，这里我做的是一个订单列表，整个函数方法如下：

function createOrders(orders) {
var items="";
$.each(orders,function (index,value) {
    var stateTxt;
    if(value.state == "1"){
        stateTxt="待付款"
    }else if(value.state == "2"){
        stateTxt="待收货"
    }else if(value.state == "3"){
        stateTxt="已收货"
    }
    items+='<div class="container-fluid bg-white mt-2 item" id='+value.id+'>'+
                '<div class="row pt-2">'+
                    '<div class="col-8">' +
                        '<i class="fa fa-calendar mx-2" aria-hidden="true"></i><p class="d-inline-block date">'+value.createTime+'</p>'+
                    '</div>' +
                    '<div class="col-4"><p class="text-warning text-right align-items-center state">'+stateTxt+'</p></div>'+
                    '</div>' +
            '<div class="border-bottom"></div>' +
            '<p class="text-dark mt-2 books">'+value.bookName+'</p>'+
            '<div class="border-bottom"></div>' +
                '<div class="row mt-2">' +
                    '<div class="col-4 offset-8 text-right">合计:<i class="fa fa-jpy" aria-hidden="true"></i><p class="d-inline-block price">'+value.totalPrice+'</p></div>'+
                '</div>' +
            '</div>';
});
$(".content").append(items);
}

如何监听每个item的事件

$(".content").on('click','.item',function () {
   ...
})

我们需要通过注册上述那个列表容器的div也就是这里的.content的on事件来实现item事件的监听。on函数里面第一个参数是需要监听的事件，比如click点击事件；第二个参数是需要监听的位置，比如整个item（这里定义了每个item的div为.item），第三个参数就是监听是的函数回调了。

最后

最后看看效果图