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 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> 元素：

:gt() 選擇器選取 index 值大于指定數字的元素，

index 值從 0 開始，

最常見的用法：與其他選擇器一起使用，選取指定組合中特定序號之后的元素（如上面的實體），

提示：請使用 :lt selector 來選取 index 值小于指定數字的元素，

語法：

$(":gt(index)")

jQuery :lt() 選擇器

實體

選取前 4 個 <tr> 元素：

定義和用法

:lt() 選擇器選取 index 值小于指定數字的元素，

index 值從 0 開始，

最常見的用法：與其他選擇器一起使用，選取指定組合中特定序號之前的元素（如上面的實體），

提示：請使用 :gt selector 來選取 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.

標籤：jQuery

上一篇：前端水平垂直居中的方式(總結)：

下一篇：ThreeJS模型透明出現遮擋