Jquery 选择器的用法

本文介绍如何使用JavaScript动态生成<ul>和<li>元素,并利用JQuery为这些动态创建的元素绑定点击事件。通过遍历数据对象,将数据拼接成<li>标签插入到<ul>中,再利用JQuery的选择器为这些元素添加交互行为。

用js 动态生成<ul>标签的<li>条目,因为在动态的创建过程中li的点击事件是不太方便的,因此采用JQuery 的类选择器来实现。

 

html代码:

<div id="group_ul" class="group_ul">
   <input type="button" name="all_intf" id="all_intf" class="all_intf" onclick="searchData('')" value="全部"/>
   <ul id="intf_group"></ul>
</div>

 

js代码:

var edit = oData.data;
                    
//遍历edit里面的值,将group_name拼接成标签<li><a href=""></a></li>
for(var k in edit){
      var groupName = edit[k].group_name;
       if(groupName!= ""){
            $("#intf_group").append('<li value="'+k+'">'+edit[k].group_id+'('+edit[k].group_name+')'+'</li>');
       }else{
            $("#intf_group").append('<li value="'+k+'">'+edit[k].group_id+'</li>');
       }
}
                    
 //给li绑定事件
 $('div#group_ul ul li').live('click',function(){
                        
     $(this).removeClass('group_li').addClass('active').siblings().removeClass('active');
                        
     var number = $(this).val();
//点击<li>标签展示的数据列表 searchData(edit[number].group_id); });

 

转载于:https://www.cnblogs.com/wll-cs/p/5884905.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值