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 获取元素在父节点中的下标，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JS获取父节点方法

    如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过):        1. 通过顶层document节点获取:            (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点.             如今,已

  • 关于extjs treepanel复选框选中父节点与子节点的问题

    关于extjs treepanel复选框选中父节点与子节点的问题

     extjs 如图,实现带有复选框的树,选中父节点时,选中所有子节点.取消所有子节点时,才能取消根节点. 复制代码 代码如下: var Fpanel = new Ext.tree.TreePanel({ id:'ptree', region:'west', layout:'anchor', border:false, rootVisible: false, root:new Ext.tree.AsyncTreeNode({}), listeners:{ "checkchange": f

  • javascript获取网页中指定节点的父节点、子节点的方法小结

    我们在实际的开发当中经常要获取页面中某个html元素,动态的更新该元素的样式.内容属性等. 那么如何获取要更新的这些元素呢?用JavaScript获取这些节点的方法有很多种,下面是总结的一些方法. 1. 通过document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点. 如 今,已经出现了如prototype.Mootools等多

  • js查找父节点的简单方法

    <div>         <a href="#">标题</a>         <ul id="demo">             <li><a href="#" onclick="selectThisItem(this)">项目一</a></li>                 <ul>             

  • 浅谈js的html元素的父节点,子节点

    parentNode和parentElement功能一样,childNodes和children功能一样.但是parentNode和childNodes是符合W3C标准的,可以说比较通用.而另外两个只是IE支持,不是标准,Firefox就不支持 示例: "parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点 ,如下: <div id="parent"> <b id="child

  • javascript下查找父节点的简单方法

    <div>        <a href="#">标题</a>        <ul id="demo">            <li><a href="#" onclick="selectThisItem(this)">项目一</a></li>                <ul>                 

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

    jQuery中直接通过$(this).index()即可得到当前元素的下标.但原生JavaScript并没有提供类似的属性或方法,这时候可以调用数组中的indexOf方法直接计算 <ul> <li>hello</li> <li>hello</li> <li id="mts">hello</li> <li>hello</li> </ul> var elt=documen

  • jQuery获取父元素及父节点的方法小结

    本文实例总结了jQuery获取父元素及父节点的方法.分享给大家供大家参考,具体如下: jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个例子, <ul class="parent1"> <li><a href="#" id="item1">jquery获取父节点</a></li> &

  • js 获取元素所有兄弟节点的实现方法

    比如一个ul里面有10个li,而第3个li上有特殊的样式(比如颜色为红色,其他为黑色).我想把其他所有li--不包括红的li--的颜色也设为红色,此时,就需要获得红li的所有兄弟节点. 兄弟,就是和你平辈的,既不是上一级也不是下一级,而且可能有比你大的(兄),也可能比你小(弟).兄弟节点同理,下面是一个常规的获取兄弟节点的办法. 代码如下 function siblings(elm) { var a = []; var p = elm.parentNode.children; for(var i

  • javascript获取元素离文档各边距离的方法

    本文实例讲述了javascript获取元素离文档各边距离的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: function getDistance(obj) {   if (!obj instanceof jQuery) {       obj = $(obj);   }   var distance = {};   distance.top = (obj.offset().top - $(document).scrollTop());   distance.bottom

  • javascript 获取HTML DOM父、子、临近节点

    在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同i

  • javascript获取元素的计算样式

    背景 使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如 <div style="width:100px;height:100px;"></div> 内嵌样式即写在style标签中,例如<style type="text/css">div{width:100px; height:100px}</style> 链接式即为用li

  • javascript获取元素CSS样式代码示例

    使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:100px;height:100px;"></div> 内嵌样式即写在style标签中,例如<style type="text/css">div{width:100px; height:100px}</style> 链接式即为用link标签

  • 原生javascript获取元素样式属性值的方法

    所以, 我们得利用IE的currentStyle和W3C的getPropertyValue获取. elem.style.attr获取样式的方法就不说了. 先来看currentStyle方法, 此对象ie专属, 代表了在全局样式表.内嵌样式和 HTML 标签属性中指定的对象格式和样式. IE下通过它, 就可以获取元素的Css属性值. 而针对其他标准浏览器, W3C也提供了一个方法getPropertyValue, 此方法, 稍有点复杂, 首先要通过document.defaultView.getC

  • javascript获取元素文本内容的通用函数

    一个获取元素文本内容的通用函数 中华人民共和国1 2 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 将HTML DOM中几个容易常用的属性做下记录: nodeName.nodeValue 以及 nodeType 包含有关于节点的信息. nodeName 属性含有某个节点的名称. 元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是 #document 注释:node

随机推荐