jQuery 是一个流行的 JavaScript 库，用于简化 HTML 文档遍历、事件处理、动画效果和 AJAX 操作。 在JavaScript开发中，经常需要获取元素在页面中的位置以及元素在列表中的索引位置。 本文将介绍如何使用jQuery获取元素在页面中的位置以及所选元素在列表中的索引位置。
1.获取元素在页面中的位置
在jQuery中，可以使用.position()、.offset()、.scrollTop()等来获取元素在页面上的位置。 这里我们以.position()方法为例：
$(selector).position()
登录复制
其中，selector代表要获取位置的元素的CSS选择器，该方法会返回一个包含top和left两个属性的对象。 这两个属性分别表示元素的上边缘和左边缘相对于其最近定位的祖先元素的像素值。 如果没有定位祖先元素，则相对于文档的左上角。
例如，假设您有以下 HTML 结构：
登录复制
然后可以使用以下代码获取#child元素相对于其父元素#parent的位置：
$("#child").position() // {top: 10, left: 20}
登录复制
2.获取选中元素在列表中的索引位置
在 jQuery 中jquery元素位置，您可以使用 .index() 方法来获取所选元素在其父元素中的索引位置。 该方法仅适用于同一级别的元素，否则会抛出错误。
例如jquery元素位置，假设您有以下 HTML 结构：
- 香蕉
- 苹果
- 橙子
- 葡萄
登录复制
然后可以使用下面的代码来获取被选元素.selected在其父元素ul中的索引位置：
$("ul li.selected").index() // 1
登录复制
需要注意的是，index()方法是从0开始计数的，所以结果为1意味着选中的元素是ul列表中的第二个。 如果想从1开始计数，可以在方法参数中传入1，如：
$("ul li.selected").index() + 1 // 2
登录复制
表示所选元素在ul列表中的位置为第二。
使用index()方法时，如果没有选择某个元素，将返回-1。
$("ul li").index($("ul li.unselected")) // -1
登录复制
总结
使用jQuery获取元素在页面中的位置以及选中元素在列表中的索引位置，这样就可以方便的实现很多交互操作。 需要注意的是，元素在页面上的位置和列表中的索引位置都是相对于其父元素的，所以使用时需要注意HTML结构和CSS样式。
