用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. sqlalchemy.exc.InternalError: (pymysql.err.InternalError) (1091, "Can't DROP 'users_ibfk_1'; check that column/key exists") [SQL: ALTER TABLE users DROP FOREIGN KEY users_ibfk_1]

    flask 迁移数据库报错 报错: sqlalchemy.exc.InternalError: (pymysql.err.InternalError) (1091, "Can't DROP ...

  2. ThinkPHP5框架缺陷导致远程命令执行(POC整合帖)

    摘要 近日thinkphp团队发布了版本更新https://blog.thinkphp.cn/869075 ,其中修复了一处getshell漏洞. 影响范围 5.x < 5.1.31<= ...

  3. java接口自动化测试小dome

    GitHub地址:https://github.com/leonInShanghai/InterfaceAutomation 这个dome 请求 https://www.v2ex.com/api/no ...

  4. Wayos网吧路由英雄联盟频繁掉线解决办法

    英雄联盟某些机器瞬间ping值飙升,然后一直掉线重连!研究好久,解决了,经验与大家分享 第一步,在路由器地址后加qos_ext.htm进入qos参数设置页面(如果出现不了设置界面请更新固件).比如:h ...

  5. LVM使用手册简化命令

    创建 hot_add    --查看新增的lun pvcreate /dev/sdb   --创建物理卷 pvcreate /dev/sdc   --创建物理卷 pvcreate /dev/sdd   ...

  6. strings、strconv:让你高效的处理字符串

    strings包 strings.HasPrefix(s, prefix string) bool 判断字符串s是否以prefix开头.类似于python中的startswith. package m ...

  7. Reservoir Computing: Harnessing a Universal Dynamical System

    原文连接:https://sinews.siam.org/Details-Page/reservoir-computing-harnessing-a-universal-dynamical-syste ...

  8. Django学习系列13:Django ORM和第一个模型

    ORM—对象关系映射器,是一个数据抽象层,描述存储在数据库中的表,行和列.处理数据库时,可以使用熟悉的面向对象方式,写出更好的代码. 在ORM的概念中,类对应数据库中的表,属性对应列,类的单个实例表示 ...

  9. JavaScript入门学习之一——初级语法

    JavaScript是前端编辑的一种编程语言(不同于html,html是一种标记语言),所以和其他的编程语言一样,我们将会从下面几点学习 基础语法 数据类型 函数 面向对象 JavaScript的组成 ...

  10. DevExpress ASP.NET Bootstrap v19.1版本亮点:Scheduler控件

    行业领先的.NET界面控件DevExpress 正式发布了v19.1版本,本文将以系列文章的方式为大家介绍DevExpress ASP.NET Bootstrap Controls中Rich Text ...