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

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

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

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

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

selector

确定查询的选择器

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

结果

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

 

---

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

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

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

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

 
<ul> 
<li id="foo">foo</li> 
<li id="bar">bar</li> 
<li id="baz">baz</li> 
</ul> 

$('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置 
$('li').index($('#bar')); //1，传递一个jQuery对象 
$('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置 
$('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的做引位置 
$('#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()示例

 
//用于二级或者三级联动 

<div id="nav"> 
<a href="http://www.51xuediannao.com/">建站素材</a> 
<a href="http://www.51xuediannao.com/">jquery特效</a> 
<a href="http://www.51xuediannao.com/">懒人主机</a> 
<a href="http://www.51xuediannao.com/qd63/">前端路上</a> 
</div> 

$("#nav a").click(function(){ 

//四个经典的用法 
var index1 = $("#nav a").index(this); 
var index2 = $("#nav a").index($(this)); 
var index3 = $(this).index() 
var index3 = $(this).index("a") 
alert(index3); 
return false; 
}); 

 

---

jQuery中this与$(this)的区别

   $("#textbox").hover(   
      function() {   
           this.title = "Test";   
      },   
      fucntion() {   
          this.title = "OK”;   
      }   
); 

这里的this其实是一个html 元素(textbox)，textbox有text属性，所以这样写是完全没有什么问题的。 
但是如果将this换成(this)就不是那回事了，报Error了。this与(this)的区别在此。

\\Error Code：   
$("#textbox").hover(   
       function() {   
          $(this).title ＝ "Test";   
       },   
       function() {   
          $(this).title = "OK";   
       }   
); 

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

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

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

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

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

$(this)

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

$(document.getElementById('idstr'))

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

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

$(‘#someAnchor’).click(function() {

    alert( this.id );

});

 

Tomorrow the birds will sing.