分享JavaScript 获取元素在父节点中的下标技巧
- 发布时间：
- 作者：码农之家原创
- 点击：187
这篇文章主要知识点是关于javascript、父节点、的内容，如果大家想对相关知识点有系统深入的学习，可以参阅以下电子书
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 相关电子书
-
完美图解物联网IoT实操：ESP8266 Arduino，Cordova物联网移动App，JavaScript微控制器编程 PDF 影印完整版电子书
分类：物联网 作者：赵英杰大小：60.8 MB
学习笔记
<
1
>
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项之和的问题， 次数不……
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所指的对象中去查找。如果还是没有找到，那么就会沿着原型链逐一访问每个原型对象，直到找到这个成员。这意味着让一个类继……
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……
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……