快捷導(dǎo)航

JavaScript中獲取元素索引的函數(shù)

更新時(shí)間：2010年09月10日 00:23:53 作者：

相信使用過(guò)jQuery的朋友都知道index()方法, 她可以很方便的幫你找到當(dāng)前元素在元素集合中索引位置. 那么, 原生JavaScript中如何獲取呢?

這是我在寫結(jié)構(gòu)/表現(xiàn)/行為完全分離的選項(xiàng)卡(jQ版和原生JS版)一文時(shí)發(fā)現(xiàn)的問題. 今天一個(gè)朋友也問到我這個(gè)問題, 這個(gè)函數(shù)的確很實(shí)用. 和大家分享一下我的實(shí)現(xiàn)方法.
代碼:

復(fù)制代碼代碼如下:

 
function index(current, obj){ 
for (var i = 0; i < obj.length; i++) { 
if (obj[i] == current) { 
return i; 
} 
} 
} 

原理:
通過(guò)一個(gè)for循環(huán)遍歷找出當(dāng)前集合中與當(dāng)前元素相等的元素,那么該元素的下標(biāo)值即是當(dāng)前元素在元素集合中的索引值.

優(yōu)化下：

復(fù)制代碼代碼如下:

 
function index(current, obj){ 
for (var i = 0, length = obj.length; i<length; i++) { 
if (obj[i] == current) { 
return i; 
} 
} 
}

您可能感興趣的文章:

元素索引

相關(guān)文章

你可能不知道的CORS跨域資源共享
這篇文章主要給大家介紹了關(guān)于CORS跨域資源共享的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用CORS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
elementui上傳圖片回顯功能實(shí)現(xiàn)
這篇文章主要介紹了elementui上傳圖片回顯,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-07-07
js定時(shí)器實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了js定時(shí)器實(shí)現(xiàn)倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
微信小程序輪播圖自定義光標(biāo)位置
這篇文章主要為大家詳細(xì)介紹了微信小程序輪播圖自定義光標(biāo)位置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06
JS實(shí)現(xiàn)圖片懶加載(lazyload)過(guò)程詳解
這篇文章主要介紹了JS實(shí)現(xiàn)圖片懶加載(lazyload)過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-04-04
JS實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)與刷新的方法匯總
這篇文章主要給大家介紹了關(guān)于JS實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)與刷新的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
7個(gè)好用的JavaScript技巧分享（譯）
這篇文章主要給大家介紹了7個(gè)好用的JavaScript技巧，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
javascript設(shè)計(jì)模式之迭代器模式
這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計(jì)模式之迭代器模式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-01-01
微信小程序?qū)崿F(xiàn)登錄界面
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)登錄界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
模仿JQuery.extend函數(shù)擴(kuò)展自己對(duì)象的js代碼
最近打算寫個(gè)自己的js工具集合，把自己平常經(jīng)常使用的方法很好的封裝起來(lái)，其中模仿了jq的結(jié)構(gòu)。
2009-12-12