html中怎样获取子元素的索引位置

来源：cnblogs　　作者：杨传伟　　时间：2021/4/12 9:52:27　　对本文有异议

jQuery 的 index() 方法返回指定元素相对于其他指定元素的索引值，

注意：索引值是从0开始计数的。

获得当前元素的索引值可用click事件触发

1 $(selector).click(function() {
2 num = $(this).index();
3 }

selector

确定查询的选择器

1 $("ul")
2   .append("<li>" + $("ul").selector + "</li>")
3   .append("<li>" + $("ul li").selector + "</li>")
4   .append("<li>" + $("div#foo ul:not([class])").selector + "</li>");

结果

1 ul
2 ul li
3 div#foo ul:not([class])

jquery获取元素索引值index()方法：

jquery的index()方法搜索匹配的元素，

并返回相应元素的索引值，从0开始计数。
1、如果不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
2、如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。
3、如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。

4、如果找不到匹配的元素，则返回-1。

 1  
 2 <ul> 
 3 <li id="foo">foo</li> 
 4 <li id="bar">bar</li> 
 5 <li id="baz">baz</li> 
 6 </ul> 
 7 
 8 $('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置 
 9 $('li').index($('#bar')); //1，传递一个jQuery对象 
10 $('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置 
11 $('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的做引位置 
12 $('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。

jQuery :gt() 选择器

实例

选择前 4 个之后的所有 <tr> 元素：

$("tr:gt(3)")

:gt() 选择器选取 index 值大于指定数字的元素。

index 值从 0 开始。

最常见的用法：与其他选择器一起使用，选取指定组合中特定序号之后的元素（如上面的实例）。

提示：请使用 :lt selector 来选取 index 值小于指定数字的元素。

语法：

$(":gt(index)")

jQuery :lt() 选择器

实例

选取前 4 个 <tr> 元素：

$("tr:lt(4)")

定义和用法

:lt() 选择器选取 index 值小于指定数字的元素。

index 值从 0 开始。

最常见的用法：与其他选择器一起使用，选取指定组合中特定序号之前的元素（如上面的实例）。

提示：请使用 :gt selector 来选取 index 值大于指定数字的元素。

语法

$(":lt(index)")

jquery获取元素索引值index()示例

 1  
 2 //用于二级或者三级联动 
 3 
 4 <div id="nav"> 
 5 <a href="http://www.51xuediannao.com/">建站素材</a> 
 6 <a href="http://www.51xuediannao.com/">jquery特效</a> 
 7 <a href="http://www.51xuediannao.com/">懒人主机</a> 
 8 <a href="http://www.51xuediannao.com/qd63/">前端路上</a> 
 9 </div> 
10 
11 $("#nav a").click(function(){ 
12 
13 //四个经典的用法 
14 var index1 = $("#nav a").index(this); 
15 var index2 = $("#nav a").index($(this)); 
16 var index3 = $(this).index() 
17 var index3 = $(this).index("a") 
18 alert(index3); 
19 return false; 
20 });

jQuery中this与$(this)的区别

1    $("#textbox").hover(   
2       function() {   
3            this.title = "Test";   
4       },   
5       fucntion() {   
6           this.title = "OK”;   
7       }   
8 );

这里的this其实是一个html 元素(textbox)，textbox有text属性，所以这样写是完全没有什么问题的。
但是如果将this换成

1 \\Error Code：   
2 $("#textbox").hover(   
3        function() {   
4           $(this).title ＝ "Test";   
5        },   
6        function() {   
7           $(this).title = "OK";   
8        }   
9 );

$()这是jQuery的一个函数，也是最核心最基本的函数

功能一：传入一个选择器字符串，获得这个选择器对应的dom内容，

保存在[ ]中，也就是俗称的jQuery对象。例如

$(function(){})//这个匿名函数在网页载入完成后开始执行
功能三：将JavaScript对象包装成为jQuery对象。例如

$(this)

$({a:1,b:2,c:3})

$(document.getElementById('idstr'))

1 var node = $('#id');
2 node.click(function(){
3 　　this.css('display','block');　　//报错  this是一个html元素，不是jquery对象，因此this不能调用jquery                             的css()方法
4 　　$(this).css();　　　　　　//正确　　　$(this)是一个jquery对象，不是html元素，可以用css()方法
5 　　this.style.display = 'block';　　//正确  this是一个html元素，不是jquery对象，因此this不能调用jquery的css()方法,
6　　　　　　　　　　　　　　　　　　　　　　//但是可以用javascript来更改style属性
7 
8});

如果你只是通过jQ对象获取简单的dom元素的属性比如id，那么你完全可以使用js原生的方法：

1 $(‘#someAnchor’).click(function() {
2 
3     alert( this.id );
4 
5 });

Tomorrow the birds will sing.

原文链接：http://www.cnblogs.com/rainbow-1/p/14600883.html

友情链接：直通硅谷　点职佳　北美留学生论坛