<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> </head> <body> <div id="nav"> <a href="">朕知道了</a> <a href="">萌萌哒</a> <a href="">不行你来咬我呀</a> <a href="">你是猴子请来的逗逼吗</a> </div> <ul id="u"> <li id="foo">foo</li> <li id="bar">bar</li> <li id="baz">baz</li> </ul> <script> $("#u li").click(function(){ var a = $('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置 var b = $('li').index($('#bar')); //1，传递一个jQuery对象 var c = $('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置 var d = $('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的索引位置 var e = $('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。 alert(e); }); $("#nav a").click(function(){ //四个经典的用法 var index1 = $("#nav a").index(this); var index2 = $("#nav a").index($(this)); var index3 = $(this).index() var index4 = $(this).index("a") alert(index4); return false; }); </script> </body> </html>