首頁 > JQuery > jquery與dom選取的技巧和使用方法:eq(i)與get(i)

jquery與dom選取的技巧和使用方法:eq(i)與get(i)

2011年11月2日     發表評論 閱讀評論
如果這篇文章有幫助到,請大方的給個讚+1!

在使用JQUERY物件時,我們通常選到的都是一個"集合",在集合中再去找尋你要的"子集合"並給予事件或是屬性的改變,今天就來介紹並記錄一下Jquery在選取"子集合"的時候跟原生Javascript DOM的選取有什麼不同,也分享一下目前我常用的方法^^

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>

以上述的這個HTML馬當範例的話,如果你是要選取第一個li有哪些方法?

1.用$.find()的方法
$(‘ul’).find(“li:first");
2.用$.eq()的方法
$(‘ul li’).eq(0);
3.調用DOM的方法
$(‘ul li’).get(0);

以上的三種方法都可以得到 <li>list item 1</li> 這個物件
但是使用上有甚麼限制嗎?

使用了DOM物件之後,你所選取的就會成為DOM的物件,不再是JQuery物件
所以當我們要提取物件中的HTML好了,寫法就會變成

$(‘ul’).find(“li:first").html();
$(‘ul’).find(“li:first")[0].innerHTML;
$(‘ul li’).eq(0).html();
$(‘ul li’).eq(0)[0].innerHTML;
$(‘ul li’).get(0).innerHTML();

我想這樣大家就很清楚,JQUERY物件跟DOM物件之間的轉換了

這邊順便介紹一下$.eq()的用法,你如果要看官方文件你可以看這
$.eq(i)中i可以是正數也可以是負數,正數的話就是從頭開始算過來,負數就是從尾巴算過來,這樣很清出明白了吧!
再來剛剛的例子來看

$(‘ul li’).eq(1).html();
$(‘ul li’).eq(-1).html();
//各會得到

<ul>
<li>list item 2</li>
<li>list item 5</li>
</ul>

如果你的i是正數,是從0開始,如果是負數就是從1開始,總沒有-0這種東西吧^^


如果文章有幫助到您,請不吝的給本站贊助,任何的鼓勵都是分享的動力!

Categories: JQuery Tags: ,
  1. 蘋果酸
    2013年8月1日11:58 | #1

    感謝大大提供的範例和解說=)

  1. 目前尚無任何 trackbacks 和 pingbacks。