jQuery index()的例子

jQuery index()是一个用于获取元素在兄弟节点集合中的位置的方法。在这里，我将讲解这个方法的用法和示例。

jQuery index()函数概述

index()函数用于返回元素在同辈元素集合中的位置。index()方法返回的位置是从0开始计算的。这个函数有多种用法，主要是用于在同辈元素集合中查找指定元素，并返回它的位置。

这个方法的使用方式如下：

$(selector).index(element)

其中，selector为被查找的元素，element是被查找的元素。如果指定的元素不在同辈元素集合中，则返回-1。

我们可以通过以下两个示例来理解和演示这个函数：

示例1: 查找指定元素在兄弟节点中的位置

假设我们现在有一个HTML页面，其中有一些列表元素。我们想找到一个特定的列表元素在同级元素集合中的位置。这时可以使用index()方法：

<ul>
    <li>列表元素1</li>
    <li class="selected">列表元素2</li>
    <li>列表元素3</li>
    <li>列表元素4</li>
    <li>列表元素5</li>
</ul>

var selected = $("li.selected");
var index = $("li").index(selected);
alert("列表元素2的位置是：" + index);

上述代码中，我们使用了jQuery选择器查找一个拥有selected类的li元素（即列表元素2），并通过index()方法查找它在li元素集合中的位置。最终，我们输出了它的位置（即1，因为从0开始计算）。

示例2：查找与当前元素相邻的指定元素

下面的示例中，我们使用了prevAll()函数查找了当前元素之前的所有同级元素，然后使用index()方法查找了其中一个指定元素（selected元素）的位置。这个demo中，我们有一个HTML页面，其中有一个selected和一个highlighted类别，我们需要找到highlighted元素所处的位置，以当前元素的左侧为中心位置，向左找到highlighted元素的位置，向右找到selected元素的位置。

<ul>
    <li>列表元素1</li>
    <li>列表元素2</li>
    <li class="highlighted">列表元素3</li>
    <li class="selected">列表元素4</li>
    <li>列表元素5</li>
</ul>

var el = $("li.selected"); 
var index = el.prevAll("li.highlighted").length;
alert("highlighted位置：" + index);

上述代码中，我们首先找到了当前元素（即拥有selected类的li元素），然后使用prevAll()函数找到了它之前的所有同级li元素，最后使用index()方法找到highlighted元素的位置。最终，我们输出了它的位置（即从0开始计算，1）。

以上就是关于jQuery index()的使用方法和示例攻略，希望对你有所帮助！