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

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 ul2 ul li3 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换成(this)就不是那回事了，报Error了。this与(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对象。例如

('#id')('.class') $('tag') 
功能二：传入一个匿名函数，例如

$(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.shaoqun.com/a/676738.html

跨境电商：https://www.ikjzd.com/

usps：https://www.ikjzd.com/w/513

白色清关：https://www.ikjzd.com/w/1410

jQuery的index()方法返回指定元素相对于其他指定元素的索引值，注意：索引值是从0开始计数的。获得当前元素的索引值可用click事件触发1$(selector).click(function(){2num=$(this).index();3}selector确定查询的选择器1$("ul")2.append("<li>"+$("u
promotion：https://www.ikjzd.com/w/127
1淘网：https://www.ikjzd.com/w/1698
patpat：https://www.ikjzd.com/w/1079
亚马逊Review权重变化后，我们该如何调整运营策略呢？：https://www.ikjzd.com/home/14514
亚马逊老司机如何手把手教会稚嫩小萝莉选品？：https://www.ikjzd.com/home/102397
解读亚马逊Q4季度财报，科技驱动的亚马逊能否冲向一万五千亿？：https://www.ikjzd.com/home/116773