当前位置:首页 > 编程教程 > javascript技术文章 > JavaScript 获取元素在父节点中的下标(推荐)

分享JavaScript 获取元素在父节点中的下标技巧

  • 发布时间:
  • 作者:码农之家
  • 点击:187

这篇文章主要知识点是关于javascript、父节点、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript函数式编程指南
  • 类型:js函数大小:12.79 MB格式:PDF作者:路易斯·阿泰西奥
立即下载

JavaScript 获取元素在父节点中的下标(推荐)

jQuery中直接通过$(this).index()即可得到当前元素的下标。但原生JavaScript并没有提供类似的属性或方法,这时候可以调用数组中的indexOf方法直接计算

<ul>
  <li>hello</li>
  <li>hello</li>
  <li id="mts">hello</li>
  <li>hello</li>
</ul>
var elt=document.getElementById('mts');
var index=var index = [].indexOf.call(elt.parentNode.querySelectorAll(elt.tagName),elt);
console.log(index);

这里是计算elt在其父节点下,相同标签的元素中的位置。首先通过var list=elt.parentNode.quertSelectorAll('li')获得同类标签的列表,这里如果直接执行list.indexOf(elt)的话会出错,提示list没有indexOf这个函数,这时候可以借用数组中的indexOf,通过call改变调用者对象:[].indexOf.call(list,elt)等价于list.indexOf(elt)

以上所述是小编给大家介绍的JavaScript 获取元素在父节点中的下标,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

javascript 相关电子书
学习笔记
网友NO.692125

Javascript迭代、递推、穷举、递归常用算法分享

累加和累积 累加:将一系列的数据加到一个变量里面。最后的得到累加的结果 比如:将1到100的数求累加和 小球从高处落下,每次返回到原来一半,求第十次小球落地时小球走过的路程 script var h=100; var s=0; for(var i=0;i10;i++){ h=h/2; s+=h; } s=s*2+100;/script 累积:将一系列的数据乘积到一个变量里面,得到累积的结果。 常见的就是n的阶乘 var n=100;var result= 1;for(var i=1;i=n;i++){ result*=i;} 一般形式: 累加:V +=e; 累积:v*=e; V代表累加和累积,e代表累加/累积项 算法要点: (1)初始化 初始化v和e 累加:v = 0; 累积:v = 1; e的初始化,如果累加/积项比较复杂,可能会分解为几个子项分别初始化,比如计算圆周率的问题,累计项分解为符号、分子和分母三部分。 (2)循环的控制条件 一种是固定的次数,比如计算弹跳距离的问题,计算数列前20项之和的问题, 次数不……

网友NO.452843

JavaScript类的继承操作实例总结

本文实例总结了JavaScript类的继承操作。分享给大家供大家参考,具体如下: 一、类式继承 首先要做的是创建构造函数。按惯例,其名称就是类名,首字母应该大写。在构造函数中,创建实例属性要用关键字 this 。类的方法则被添加到 prototype 对象中。要创建该类的实例,只需结合关键字 new 调用这构造函数即可。 /* Class Person. */function Person(name) { this.name = name;}Person.prototype.getName = function() { return this.name;}var reader = new Person('John Smith');reader.getName(); 二、原型链 JavaScript的每个对象都有一个名为 prototype 的属性,这个属性要么指向另一个对象,要么是null.在访问对象的某个成员时,如果这个成员未见于当前对象,那么就会到prototype所指的对象中去查找。如果还是没有找到,那么就会沿着原型链逐一访问每个原型对象,直到找到这个成员。这意味着让一个类继……

网友NO.891582

JavaScript生成图形验证码

本文实例为大家分享了js生成图形验证码的具体代码,供大家参考,具体内容如下 getGVerify:function (id) { function GVerify(options) { //创建一个图形验证码对象,接收options对象为参数 this.options = { //默认options参数值 id: "", //容器Id canvasId: "verifyCanvas", //canvas的ID width: "100", //默认canvas宽度 height: "30", //默认canvas高度 type: "blend", //图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母 code: "" } if(Object.prototype.toString.call(options) == "[object Object]"){//判断传入参数类型 for(var i in options) { //根据传入的参数,修改默认参数值 this.options[i] = options[i]; } }else{ this.options.id = options; } this.options.numArr = "0,1,2,3,4,5,6,7,8,9".split(","); this.options.letterArr = getAllLetter(); this._init(); this.refresh(); } GVerify.prototype = { /**版本号**/ version: '1.0.0', /**初始化方法**/ _init: function() { var con = docume……

网友NO.376295

JavaScript使用ul中li标签实现删除效果

本文实例为大家分享了js使用ul中li标签实现删除效果的具体代码,供大家参考,具体内容如下 html head meta charset="utf-8" title/title style type="text/css" ul { list-style: none; } li { background-color: #ddd; margin-top: 2px; } li:hover { background-color: #be3131; } li.hover { background-color: green; } ; /style /head body ul id="uid" li篮球/li li足球/li li羽毛球/li li篮球/li li足球/li li羽毛球/li li篮球/li li足球/li li羽毛球/li /ul button onclick="doDel()"删除/button script type="text/javascript" //获取所有的li节点 var list = document.getElementById("uid").getElementsByTagName("li"); //给每一个li节点添加class属性 for(var i = 0; i list.length; i++) { list[i].onclick = function() { if(this.className == "hover") { this.className = ""; } else { this.className = "hover"; } } } //删除操作 function doDel() { for(var i = 0; i list.length; i++) { if(list[i].className == "hover") { list[i].parentNode.removeChild(list……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

投诉 / 推广 / 赞助:QQ:520161757