JavaScript 獲取元素在父節(jié)點(diǎn)中的下標(biāo)(推薦)

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

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

jQuery中直接通過(guò)$(this).index()即可得到當(dāng)前元素的下標(biāo)。但原生JavaScript并沒(méi)有提供類(lèi)似的屬性或方法，這時(shí)候可以調(diào)用數(shù)組中的indexOf方法直接計(jì)算

<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);

這里是計(jì)算elt在其父節(jié)點(diǎn)下，相同標(biāo)簽的元素中的位置。首先通過(guò)var list=elt.parentNode.quertSelectorAll('li')獲得同類(lèi)標(biāo)簽的列表，這里如果直接執(zhí)行l(wèi)ist.indexOf(elt)的話會(huì)出錯(cuò)，提示list沒(méi)有indexOf這個(gè)函數(shù)，這時(shí)候可以借用數(shù)組中的indexOf，通過(guò)call改變調(diào)用者對(duì)象：[].indexOf.call(list,elt)等價(jià)于list.indexOf(elt)

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

您可能感興趣的文章:

相關(guān)文章

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