用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);
});

Jquery 选择器的用法的更多相关文章

  1. 分针网——每日分享: jquery选择器的用法

    jQuery选择器是jQuery库的一大特色,用这些选择器不但可以省去繁琐的JavaScript 书写方式,还可以节省时间和效率,正是有这些jQuery选择器,才让我们更容易的操作JavaScript ...

  2. 分针网—IT教育: jquery选择器的用法

    jQuery选择器是jQuery库的一大特色,用这些选择器不但可以省去繁琐的JavaScript 书写方式,还可以节省时间和效率,正是有这些jQuery选择器,才让我们更容易的操作JavaScript ...

  3. 各jQuery选择器的用法(转)

    这篇文章来介绍下jQuery的选择器. 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依 赖于选择器.因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事 ...

  4. jquery 选择器(name,属性,元素)大全

    jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...

  5. jquery选择器用法笔记(第一部分)

    由于我在项目中用jquery比较多,而且觉得jquery真的很不错,尤其是其灵活高效的选择器更是令人无法忘怀.那么,今天就来写一篇非常基础的关于jquery选择器的文章,路过的朋友可以收藏以作参考. ...

  6. jquery选择器用法笔记(第二部分)

    今天继续讲讲jquery选择器的更多用法,希望能给大家带来帮助. 9.$("ul li:eq(3)")  --  列表中的第四个元素(index 从 0 开始) :eq() 选择器 ...

  7. jquery选择器用法

    jquery的基础选择器 选择器的用法其实跟咱们当时讲css的选择器用法类似,只是代码书写的不同 <ul> <li id="brother" class=&quo ...

  8. jquery选择器使用说明

    在jquery中选择器是一个非常重要的东西,几乎做什么都离不开它,下面我总结了jquery几种选择器的用法.以方便后面直接可以用到!! 层次选择器: 1.find()://找到该元素的子元素以及孙子元 ...

  9. 精通jQuery选择器

    虽然jQuery上手简单,相比于其他库学习起来较为简单,但是要全面掌握,却不轻松.因为它涉及到网页开发的方方面面,提供的方法和内部变化有上千种之多.初学者常常感到,入门很方便,提高很困难.本文的目标是 ...

随机推荐

  1. 浅尝https

    HTTPS http超文本传输协议,所以的东西都是明文传输,容易被拦截,被攻击,我们希望能对通话内容进行加密,那么因此而生,出现了https https:在http的基础上新增加了SSL层 先放图 / ...

  2. 本地存储cookie,localStorage,sessionStorage

    常见的前端存储有老朋友 cookie,短暂的 sessionStorage,和简单强大的localStorage 他们之间的区别有以下几点 1.. cookie在浏览器和服务器间来回传递.而sessi ...

  3. webpack4 打包

    1. 基本安装及命令 npm config set registry https://registry.npm.taobao.org     //  淘宝镜像npm install webpack-c ...

  4. 网络初级篇之STP(概念原理)

    一.什么是STP 生成树协议(Spanning Tree Protocol,STP),是一种工作在OSI网络模型中的第二层(数据链路层)的通信协议,基本应用是防止交换机冗余链路产生的环路.用于确保以太 ...

  5. HAproxy企业应用,TCP/HTTP动静分离

    HAProxy的是一个免费的.开源的的tcp/http反向代理工具.负载均衡器,是一个企业非常快速和可靠的安全的解决方案,提供高可用性.高并发性,负载均衡和代理对TCP和基于HTTP的应用程序.它特别 ...

  6. zabbix的nginx监控+邮件报警

    nginx监控    下载nginx的监控模板

  7. Windows10永久激活的工具

    最近发现一个很好用的Windows10 永久激活的工具,比KMS什么的管用,而且无毒无公害.几乎支持所有的win10版本.感兴趣的朋友可以试试.之前win10没洗白的同学,也试试吧,说不定就洗白了呢. ...

  8. git最最最最...常用命令

    使用git 也有一段时间了,但是一直没有好好的去学下:今天刚好有空,就把自己不足的地方补了一下:废话就不多说了,直接步入正题: 1:git 如何提交代码 以及 如何拉代码 git clone可以将远程 ...

  9. beanFactory & FactoryBean区别

    FactoryBean Spring内部实现的一种规范& 开头作为beanName Spring中所有的容器都是FactoryBean 因为容器本身也由容器管理, root来创建 都是单列在I ...

  10. 01-01 Web应用

    一 Web应用的组成 接下来我们学习的目的是为了开发一个Web应用程序,而Web应用程序是基于B/S架构的,其中B指的是浏览器,负责向S端发送请求信息,而S端会根据接收到的请求信息返回相应的数据给浏览 ...