js怎么判断点击了哪个li标签的下标_js 索引下标之li集合绑定点击事件

这篇博客介绍了如何使用JavaScript为li元素集合绑定点击事件,展示三种方法来确定点击的li元素的索引,并更新其内容显示索引。通过这些方法,开发者可以更好地理解和应用JavaScript在DOM操作中的技巧。
摘要由CSDN通过智能技术生成

js 索引下标之li集合绑定点击事件

下面一段代码给大家介绍li集合绑定点击事件,具体代码如下所示:

//Method-1:

var items = document.getElementsByTagName('li');

for(var i=0;i

items[i].index = i;

items[i].onclick = function(){

this.innerHTML = this.index;

}

}

//Method-2:

var items = document.getElementsByTagName('li');

for(var i = 0; i

(function(index){

items[i].onclick = function(){

this.innerHTML = index;

}

})(i)

}

//Method-3:

var items = document.getElementsByTagName('li');

for(var i = 0; i

items[i].onclick = function(index){

return function(){

this.innerHTML = index;

}

}(i)

}

总结

以上所述是小编给大家介绍的js 索引下标之li集合绑定点击事件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2018-01-10

6b5aa0751a6f1e6a9d0b665a02cc1f46.gif

用Javascript为DropDownList控件下拉式选择添加一个Item至定义索引位置. 准备数据,创建一个对象,将是存储DropDownList控件每个Item数据. 复制代码 代码如下: Imports Microsoft.VisualBasic Namespace Insus.NET Public Class Catalog Private _ID As Integer Private _Name As String Public Property ID As Integer Get

6b5aa0751a6f1e6a9d0b665a02cc1f46.gif

本文实例讲述了JS实现点击li标签弹出对应的索引功能.分享给大家供大家参考,具体如下: 需求:点击li标签,弹出对应的索引 先看效果: html结构:

  • 我是li标签1
  • 我是li标签2
  • 我是li标签3
  • 我是li标签4
  • 我是li标签5 <

6b5aa0751a6f1e6a9d0b665a02cc1f46.gif

本文实例讲述了JavaScript遍历DOM元素的常见方式.分享给大家供大家参考,具体如下: 对于元素之间的空格,IE9以及之前的版本不会返回文本节点,,其他的浏览器会返回文本节点,所以我们在使用firstChild,lastChild时会导致行为不一致. DOM中为元素新增了下面几个属性: childElementCount:返回子元素(不包括文本节点和注释)的数量: firstElementChild:firstChild的元素版: lastElementChild:lastChild的元素

首先我们需要一个html结构

  • a
  • a
  • a
  • a
  • a
我们遍历ul 下所有的li 并添加点击事件,一般我们会在for循环里面添加点击事件,但是结果和我们所期盼不一样,那么是为什么呢???? 接下来看看我们的

本文实例讲述了JavaScript遍历DOM对象所有属性的实现方法.分享给大家供大家参考,具体如下: DOM对象的HTML: 复制代码 代码如下: Disable State Cookie 1.遍历DOM对象所有具备的属性(全属性.不管在HTML tag中是否设置都会遍历) var obj=docume

6b5aa0751a6f1e6a9d0b665a02cc1f46.gif

本文实例讲述了JS遍历DOM文档树的方法.分享给大家供大家参考,具体如下: 一 介绍 遍历文档树通过使用parentNode属性.firstChild属性.lastChild属性.previousSibling属性和nextSibling属性来实现. 1.parentNode属性 该属性返回当前节点的父节点. [pNode=]obj.parentNode pNode:该参数用来存储父节点,如果不存在父节点将返回"null". 2.firstChild属性 该属性返回当前节点的第一个子节

本文实例讲述了JavaScript实现的DOM树遍历方法.分享给大家供大家参考,具体如下: 二叉 DOM 树的遍历 function Tree() { var Node = function(key){ this.key = key; this.left = null; this.right = null; } root =null; } 前序遍历 首先访问根结点,然后遍历左子树,最后遍历右子树 Tree.prototype.preOrderTraverse = function(callbac

POP 删除最后一项 删除最后一项,并返回删除元素的值:如果数组为空则返回undefine var a = [1,2,3,4,5]; a.pop();//a:[1, 2, 3, 4] a.pop();//a:[1, 2, 3] a.pop();//a:[1, 2] shift 删除第一项 删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefine var a = [1,2,3,4,5]; a.shift(); //a:[2,3,4,5] a.shift(); //a:[3, 4,

DOM树由文档中的所有节点(元素节点.文本节点.注释节点等)所构成的一个树结构,DOM树的解析和构建是浏览器要实现的关键功能.既然DOM树是一个树结构,那么我们就可以使用遍历树结构的相关方法来对DOM树进行遍历,同时DOM2中的"Traversal"模块又提供了两种新的类型,从而可以很方便地实现DOM树的先序遍历. 注:本文中的5种方法都是对DOM的先序遍历方法(深度优先遍历),并且只关注Element类型. 1. 使用DOM1中的基础接口,递归遍历DOM树 DOM1中为基础类型Nod

本文实例讲述了PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法.分享给大家供大家参考,具体如下: 先来看看前序遍历.中序遍历与后序遍历原理图: 根据树的前序遍历和中序遍历构造树并输出后序遍历代码如下: <?php class BinaryTreeNode{ public $m_value; public $m_left; public $m_right; } function ConstructCore($preorder,$inorder){ if(count($preorder)!

在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的API中,有parents(). parent().closest()这几个,一直不太清楚它们具体的区别,所以狠下心好好读了一下jQuery的API文档,并把区别记在这里,以供参考.  1.parents([selector]) 本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的祖先节点,并将这些节点包装成jQuery对象返回,返回的节点集是以从里到外的顺序排序的. 同时,本方

本文实例讲述了JQuery遍历DOM节点的方法.分享给大家供大家参考.具体分析如下: 本节的核心是介绍JQuery的DOM操作,前面介绍了很多创建.删除.替换等等节点操作.这里介绍如何遍历节点,选中临近节点等的一些方法. children()方法 该方法用于取得匹配元素的子元素集合.根据DOM树的结构,可以知道各个元素之间的关系以及它们子节点的个数. 下面使用children()方法来获取匹配元素的所有子元素的个数. var $body = $("body").children();

本文实例讲述了Python3遍历目录树的方法.分享给大家供大家参考.具体实现方法如下: import os, fnmatch # 检查一个目录,后者某个包含子目录的目录树,并根据某种模式迭代所有文件 # patterns如:*.html,若大小写敏感可写*.[Hh][Tt][Mm][Ll] # single_level 为True表示只检查第一层 # yield_folders 表示是否显示子目录,为False只遍历子目录中的文件, # 但不返回字母名 def all_files(root, p

前几天需要实现对整个目录树的遍历,查阅了相关的一些资料.开始找到的原始的方法是使用readdir()与lstat()函数实现递归遍历,后来发现linux对于目录遍历这种最常用的操作已经提供了很完善的接口:ftw()与nftw().下面就这两种方法具体说明一下.1.手动实现递归1.1 stat()函数族stat函数族包括:stat,fstat以及lstat函数,都是向用户返回文件的属性信息(元数据). 复制代码 代码如下: view plaincopy to clipboardprint?#inc

本文实例讲述了C#使用前序遍历.中序遍历和后序遍历打印二叉树的方法.分享给大家供大家参考.具体实现方法如下: public class BinaryTreeNode { public BinaryTreeNode Left { get; set; } public BinaryTreeNode Right { get; set; } public int Data { get; set; } public BinaryTreeNode(int data) { this.Data = data;

假设有这样一个任务,希望对某个文件夹(包括所有子文件夹与文件)中的所有文件进行处理.这就需要遍历整理目录树, 处理遇到的每个文件. import os ''' 遍历目录树 ''' for folder_name,sub_folders,filenames in os.walk('F:\\dicts'): print('当前文件夹:'+folder_name) for sub_folder in sub_folders: print('所包含的子文件夹:'+sub_folder) for file

题目:输入一个整数数组,判断该数组是不是某二元查找树的后序遍历的结果.如果是返回true,否则返回false.例如输入5.7.6.9.11.10.8,由于这一整数序列是如下树的后序遍历结果.    8    / \  6   10 / \    / \ 5  7 9 11因此返回true.如果输入7.4.6.5,没有哪棵树的后序遍历的结果是这个序列,因此返回false.本题网上已经有用递归单纯判断的解法. 个人解法: 先得到序列对应的中序序列, 然后看中序序列是否从小到大有序, 得出判断. 相比

Angular等现代Web框架极大的提高了开发效率,比如我们经常会在开发过程中写出类似下面的代码:

{{title}}
export class AppComponent { title = 'angular'; } 这种模板写法并不是HTML原生支持的,那么Angular又是如何转换这些代码,并显示成我们期望的界面呢? 首先我们来看看Angular把上述代码编译成什么样子: ...省略了其他代码 i0.ɵɵelementStart(0, "di
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值