在前端开发中，经常需要获取一个子元素在其父元素中的位置，以便进行相关操作。本文将介绍如何使用 JavaScript 和 jQuery 获取子元素相对于父元素的索引。
使用 JavaScript 获取子元素索引
JavaScript 提供了一种简单的方法来获取子元素在其父元素中的索引，使用 parentNode 和 childNodes 属性即可实现。以下是示例代码：
-- -------------------- ---- -------
-------- -------------------- -
--- ------ - -----------------
--- -------- - ------------------
--- ----- - --- -- ------------
--- ---- - - -- - - ---------------- ---- -
-- ------------ -- ------ -
----- - --
------
-
-
------ ------
-
-- ----
--- ------ - ----------------------------------
--- ----- - ---------------------------------
--- ----- - ---------------------
------------------- -- -------------上述示例代码中，getChildIndex 函数接收一个参数 child，表示要查找索引的子元素。函数首先获取子元素的父元素和所有子元素，然后循环遍历子元素集合，如果找到与指定子元素相同的元素，则返回其索引值。如果未找到子元素，则会返回默认值 -1。
使用 jQuery 获取子元素索引
另外一种获取子元素索引的方法是使用 jQuery。jQuery 提供了 index 方法，可以用来获取一个元素在其父元素中的索引。以下是示例代码：
// 示例用法
var parent = $("#parent");
var child = $("#child");
var index = parent.children().index(child);
console.log(index); // 输出子元素在父元素中的索引上述示例代码中，首先通过 $ 函数获取父元素和子元素的 jQuery 对象，然后使用 children 方法获取所有子元素，并调用 index 方法获取指定子元素相对于父元素的索引值。
总结
本文介绍了两种获取子元素相对于父元素的索引的方法，分别是使用 JavaScript 和 jQuery。其中，JavaScript 方法使用了 parentNode 和 childNodes 属性，需要手动遍历子元素集合；而 jQuery 方法则非常简单，只需使用 children 和 index 方法即可。无论使用哪种方法，都可以方便地获取子元素在其父元素中的位置，为后续操作提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9892
