html中怎樣獲取子元素的索引位置

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

注意：索引值是從0開始計數的。

獲得當前元素的索引值可用click事件觸發

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

selector

確定查詢的選擇器

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

結果

ul 2 ul li 3 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對象，返回這個對象在原先集合中的索引位置  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()示例

 
//用於二級或者三級聯動  3 
<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(){ 12 
//四個經典的用法 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)的區別

   $("#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)的區別在此。

\\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'))

var node = $('#id'); 2 node.click(function(){ 3 　　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() { 2 
    alert( this.id ); 4 
});

 

Tomorrow the birds will sing.