快捷導(dǎo)航

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

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

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