获取当前元素在兄弟元素节点中的索引

第一种

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><ul id="ul"><li id="item1">item1</li><li id="item2">item2</li><li id="item3">item3</li><li id="item4">item4</li><li id="item5">item5</li><li id="item6">item6</li><li id="item7">item7</li><li id="item8">item8</li><li id="item9">item9</li><li id="item10">item10</li></ul><script>var oUl=document.getElementById('ul');var lis= oUl.firstElementChild;//console.log(lis);var item1=document.getElementById('item1');var item2=document.getElementById('item2');var item3=document.getElementById('item3');var item4=document.getElementById('item4');var item5=document.getElementById('item5');var item6=document.getElementById('item6');var item7=document.getElementById('item7');var item8=document.getElementById('item8');var item9=document.getElementById('item9');var item10=document.getElementById('item10');function getIndex(curEle){var ary=[];var pre=curEle.previousSibling;while(pre){if(pre.nodeType===1){ary.push(pre);pre=pre.previousSibling;}else{pre=pre.previousSibling; }}return ary.length;}console.log(getIndex(item2))</script>
</body>
</html>
复制代码

第二种方法

  // 获取当前元素在兄弟节点中的索引console.log(getIndex(lis));function getIndex(curEle) {var arr = [],i = 1;arr[0] = curEle;var temp = curEle.previousSibling;while(temp){if (temp.nodeType === 1){arr[i] = temp;i++;}temp = temp.previousSibling;}arr = arr.reverse();return arr.length-1+1;}})()
复制代码

获取当前元素在兄弟元素节点中的索引相关推荐

Vue中获取当前点击元素的父元素、子元素、兄弟元素
Vue如何获取当前点击元素? 获取父元素.子元素.兄弟元素呢? 通过帮定点击事件: 例如: <button class="shanchu" @click="shan ...
元素的样式设置元素类样式的操作开关灯效果获取兄弟元素当前元素的兄弟元素样式
元素的样式设置 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
jq遍历子元素_jquery:::选择器/遍历/获取所有的子元素、兄弟元素
jquery是一个基于javascript的轻量级工具包,是基于javascript的函数库,它使得javascript开发更加高效快捷. 1,jquery的选择器分为: 基本选择器(又分为id选择器 ...
HTML中父元素、子元素、后代元素和兄弟元素
HTML文档中的元素有着明确的关系. 包含另一个元素的元素是被包含元素的父元素:反过来说,被包含元素是包含元素的子元素. 一个元素可以有多个子元素,但只能有一个父元素. 包含在其他元素中的元素也可能包 ...
jquery兄弟标签_jquery 子元素及兄弟元素选择器
.children() 获得匹配元素集合中每个元素的子元素,选择器选择性筛选. list item 1 list item 2 ss list item 3 $(function(){ $('ul') ...
JS DOM 编程复习笔记--父元素、子元素和兄弟元素（三）
今天我们来复习DOM中的获取父元素.子元素和兄弟元素的API,它们主要有parentNode.firstChild.firstElementChild.lastChild.lastElementChi ...
jQuery——遍历DOM元素的兄弟元素
任务描述本关任务:用 jQuery 遍历 DOM 元素的兄弟元素.效果如下: 相关知识为了完成本关任务,你需要掌握:1.siblings(),2. next() , nextAll() 3. pr ...
Javascript JQuery获取当前元素的兄弟元素/上一个/下一个元素（转）
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s的下一个 ...
js和jquery获取父级元素、子级元素、兄弟元素的方法{转}
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当成DOM元素原生的JS ...

获取当前元素在兄弟元素节点中的索引

第一种

第二种方法

获取当前元素在兄弟元素节点中的索引相关推荐

最新文章

热门文章