<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
  <li>香蕉</li>
  <li>苹果</li>
<li>菠萝</li>
  <li>猕猴桃</li>
  <li>芒果</li>
</ul>
</body>
</html>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script type="text/javascript">
var itemli = document.getElementsByTagName("li");
//方法一:
// for(var i =0;i<itemli.length;i++){
// itemli[i].index = i;
// itemli[i].onclick = function () {
// console.log(this.index+this.innerHTML);
// }
// } // 方法二:
// for(var i = 0; i<itemli.length; i++){
//
// (function(n){
//
// itemli[i].onclick = function(){
//
// console.log(n+itemli[n].innerHTML); // 索引值从0开始
//
// }
//
// })(i)
//
// } // 方法三:
// for(var i = 0; i<itemli.length; i++){
// itemli[i].onclick = function(n){
// return function(){
// console.log(n+itemli[n].innerHTML); // \n换行 索引值从0开始
// }
// }(i)
// } // 方法四:
$("ul li").click(function () {
var item = $(this).index();
var textword = $(this).text();
console.log(item+textword);
})
</script>

2.考虑到如果li是动态的添加;

可以把事件绑定在ul上,多次的事件不用在每个li绑定,而是用on一次绑定在ul上,提高了性能;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</body>
</html>
<script type="text/javascript">
$("ul").on("mouseover",function(e){
$(e.target).css("background-color","#ddd").siblings().css("background-color","white");
});
</script>

js循环添加事件的更多相关文章

  1. js循环添加事件的问题

    1.需求 给下面每个按钮增加事件 <ul id="list"> <li>按钮1</li> <li>按钮2</li> &l ...

  2. JS给元素循环添加事件的问题

    <ul> <li>男</li> <li>女</li> <li>老</li> <li>少</li&g ...

  3. js动态添加事件-事件委托

    作者:白狼 出处:http://www.manks.top/javascript-dynamic-event.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给 ...

  4. js动态添加事件

    转载的,但不明确出处 往往我们需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几种方法,我们也常常混合使用.方法一.setAttributevar obj = document. ...

  5. js中添加事件 attachEvent 与 addEventListener

    给元素添加事件时,使用js进行实现时产生了疑惑,有关事件浏览器兼容的问题,在此记录如下. <!DOCTYPE html> <html> <head> <met ...

  6. JS——动态添加事件和移除事件(有待补充...)

    动态的添加事件:利用 attachEvent 和 addEventListener IE 支持 attachEvent: obj.attachEvent("onclick", Fo ...

  7. JS - 循环添加 DropDownList(Select)

    代码: <td style="padding-left: 10px;"> <select id="ddl_picture_3"> < ...

  8. 从循环添加事件谈起对JS闭包的理解

    1.引子 相信很多初学js的人,都遇到这样一种情况:想要给一堆按钮添加各自的事件,比如点击第i个按钮时,弹出i这个值.理所当然地,我们会这样写: var buttons = document.getE ...

  9. JS闭包机制实现为DOM元素循环添加事件

    HTML代码: <button type='button' class='btn' id='1'>按钮1</button> <button type='button' c ...

随机推荐

  1. ubuntu14.04和win7共享文件夹

    环境:vmware12 问题:安装了vmware-tools,但是在/mnt/hgfs下面看不到共享的文件夹. 按照网上的一些经验和教程使用如下命令: mount -t vmhgfs .host:/ ...

  2. nyoj_34_韩信点兵

     中国剩余定理: 代码: #include <iostream> #include <cstdio> using namespace std; int main() { int ...

  3. 检索COM 类工厂中 CLSID 为 {} 的组件时失败

  4. c# 类型拷贝

    /// <summary> /// 类 名:EntityHelper /// 类 说 明:实体操作方法类 /// : /// 创建时间:2013/8/12 /// </summary ...

  5. mysql 删除重复数据保留只保留一条

    SELECT * FROM (SELECT addTime FROM motorcade.car_msg_info GROUP BY addTime HAVING COUNT(addTime) > ...

  6. CCF 最大的矩形

    问题描述 试题编号: 3 试题名称: 最大的矩形 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 在横轴上放了n个相邻的矩形,每个矩形的宽度是1,而第i(1 ≤ i ≤ n)个 ...

  7. IOS - ARC改为非ARC

    1.project -> Build settings -> Apple LLVM complier 3.0 - Language -> objective-C Automatic ...

  8. asp.net 上一条和下一条记录的显示

    这里我用的是input标签跳转页面的: 前台aspx页面中: <input class="btn" id="btnSetForm" type=" ...

  9. 25个增强iOS应用程序性能的提示和技巧(初级篇)

    25个增强iOS应用程序性能的提示和技巧(初级篇) 标签: ios内存管理性能优化 2013-12-13 10:53 916人阅读 评论(0) 收藏 举报  分类: IPhone开发高级系列(34)  ...

  10. web前端打印总结

    资料: http://blog.5ibc.net/p/39927.html 正文: 简单的说就是映入两个css文件 <link/> <link/> 每个css文件都有一个属性是 ...