用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. html2canvas+Canvas2Image分享海报功能踩坑

    首先需要 import html2canvas from 'html2canvas'; import {Canvas2Image} from '../../assets/js/plug/canvas2 ...

  2. h5转pb的两个坑

    1.需要加上如下设置,否则转换前后输出可能不一致,这个主要针对dropout.BN层训练测试不一致 from keras import backend as K K.set_learning_phas ...

  3. PHP循环while do while循环

    <?php #从1打印到10,除了5 $i=1; while ($i<10) { if ($i==5) { $i++; continue; } echo $i++."<br ...

  4. JavaScript基础——JavaScript函数(笔记)

    avaScript 函数(笔记) JavaScript 是函数式编程语言,在JavaScript脚本中可以随处看到函数,函数构成了JavaScript源代码的主体. 一.定义函数 定义函数的方法有两种 ...

  5. 算法复习-P NP NPC NP-hard概念

    from http://blog.csdn.net/huang1024rui/article/details/49154507 P.NP.NPC和NP-Hard相关概念的图形和解释 一.相关概念 P: ...

  6. 23.git简单使用

    git:我主要是为了收集命令,学习请去看廖雪峰的博客,内容很详细 git客户端下载: Git是GitHub开源社区的版本管理系统: 下载地址:https://git-scm.com/download/ ...

  7. JavaScript的数组API函数

    ㈠数组转字符串 ⑴String(arr):将arr中的每个元素转为字符串,用逗号分隔     固定套路:对数组拍照:用于鉴别是否数组被修改过 ⑵arr.join("连接符"):将a ...

  8. linux查看网关

    Linux下查看网关方法:route -n ip route show traceroute www.prudentwoo.com -s 100 第一行就是自己的默认网关 netstat -r mor ...

  9. Flash大文件断点续传功能

    一.概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载.在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了.一般断点下载时才用到Range和Content- ...

  10. 静态库lib、动态库dll基础

    首先从hello world!开始 //main.cpp文件 void cpu(); int main() { put(); ; } 在main.cpp中定义了一个cpu():函数,但没有实现其功能, ...