jQuery的index()方法获取相应元素的索引值

JQuery 861 0 2022-09-20

jQuery的index()方法获取相应元素的索引值

jQuery的index()方法搜索匹配的元素,并返回相应元素的索引值,从0开始计数;

如果没给.index()方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于同辈元素的位置;

如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置;

如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置,如果找不到匹配的元素,则返回-1

例如:


LANG-JS
www.hilo8.com
  1. <ul>
  2.   <li id="zero">zero</li>
  3.   <li id="one">one</li>
  4.   <li id="two">two</li>
  5.   <li id="three">three</li>
  6. </ul>
  7. $('li').index(document.getElementById('one')) //1 传递一个DOM对象,返回这个对象在原先集合中的索引位置
  8. $('li').index($('#one')) // 1 传递一个jQuery对象
  9. $('li').index($('li:gt(0)')) // 1 传递一个jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置
  10. $('#one').index('li') // 1 传递一个选择器,返回#one在所有li中的索引位置
  11. $('#one').index() // 1 不传递参数,返回这个元素在同辈中的索引位置


又比如:

LANG-JS
www.hilo8.com
  1. <div id="nav">
  2.   <a href="http://www.baidu.com/">百度1</a>
  3.   <a href="http://www.baidu.com/">百度2</a>
  4.   <a href="http://www.baidu.com/">百度3</a>
  5.   <a href="http://www.baidu.com/">百度4</a>
  6. </div>
  7. $('#nav a').click(function () {
  8.   var index1 = $('#nav a').index(this)
  9.   var index2 = $('#nav a').index($(this))
  10.   var index3 = $(this).index()
  11.   var index3 = $(this).index('a')
  12.   alert(index3)
  13.   return false
  14. })
  15. //点击网页中百度1、2、3、4,依次弹出:0、1、2、3

上一篇:jQuery 常用方法汇总学习使用

下一篇:jq获取表单值内容并转换为json对象(方法serialize或serializeArray)

讨论数量:0

请先登录再发表讨论。 2025-06-08

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链