JavaScript 獲取元素在父節(jié)點中的下標(推薦)

更新時間：2017年06月28日 08:33:47 作者：景影隨形

jQuery中直接通過$(this).index()即可得到當前元素的下標。下面通過實例給大家介紹JavaScript 獲取元素在父節(jié)點中的下標，需要的朋友參考下吧

jQuery中直接通過$(this).index()即可得到當前元素的下標。但原生JavaScript并沒有提供類似的屬性或方法，這時候可以調用數(shù)組中的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在其父節(jié)點下，相同標簽的元素中的位置。首先通過var list=elt.parentNode.quertSelectorAll('li')獲得同類標簽的列表，這里如果直接執(zhí)行l(wèi)ist.indexOf(elt)的話會出錯，提示list沒有indexOf這個函數(shù)，這時候可以借用數(shù)組中的indexOf，通過call改變調用者對象：[].indexOf.call(list,elt)等價于list.indexOf(elt)

以上所述是小編給大家介紹的JavaScript 獲取元素在父節(jié)點中的下標，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

vue中使用cropperjs的方法
這篇文章給大家總結了在.vue文件里cropperjs的使用方法和經(jīng)驗教訓，感興趣的朋友跟隨腳本之家小編學習吧
2018-03-03
JS針對Array的各種操作匯總
這篇文章主要為大家詳細介紹了JS針對Array的各種操作,如何創(chuàng)建Array,數(shù)組的一些簡單和基本的操作,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-11-11
JS實現(xiàn)簡易計算器
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡易計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-02-02
JS關于for循環(huán)中使用setTimeout的四種解決方案
這篇文章主要介紹了JS關于for循環(huán)中使用setTimeout的四種解決方案，想深入了解JS的同學，一定要看下
2021-05-05
深入了解TypeScript中常用類型的使用
javaScript??有三個經(jīng)常會使用到的原始類型：stirng，number,boolean?。每一個在Typescript?都有一個相對應的類型。本文就來聊聊TypeScript中這些常用類型的使用，感興趣的可以了解一下
2022-09-09
javascript getElementsByTagName
DC大神為早期不支持getElementsByTagName的瀏覽器寫的hack，當然與原生的不能同日而言，原生的用到緩存機制呢。
2011-01-01
eCharts圖表實現(xiàn)扇形和折線圖代碼示例
本文概述了前端和后端實現(xiàn)數(shù)據(jù)可視化圖表的步驟,前端部分涉及引入文件、設置盒子、發(fā)送請求等,最終通過ECharts初始化圖形,后端則包括定義VO類、處理mapper和業(yè)務邏輯等,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-09-09
js中的new?Map的用法示例小結
這篇文章主要介紹了js中的new?Map的用法示例小結,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-03-03
JavaScript模板引擎實現(xiàn)原理實例詳解
這篇文章主要介紹了JavaScript模板引擎實現(xiàn)原理,結合實例形式詳細分析了JavaScript模板引擎原理、定義、使用方法及相關操作注意事項,需要的朋友可以參考下
2018-12-12
javascript中使用css需要注意的地方小結
javascript中使用css需要注意的地方小結，注意保留字問題。
2010-09-09