在jQuery中,我們常常會使用到li索引,特別是在操作ul和ol列表時。在這里我們先來看一下如何獲取一個li的索引:
<ul id="list"> <li>第一項</li> <li>第二項</li> <li>第三項</li> <li>第四項</li> </ul> <script> $(function(){ var index = $('#list li').index(); // 獲取第一個li的索引 console.log(index); }); </script>
我們使用了jQuery的index()方法來獲取了第一個li的索引值。當然,我們也可以獲取其他li的索引:
$(function(){ var index1 = $('#list li:eq(1)').index(); // 獲取第二個li的索引 console.log(index1); var index2 = $('#list li:last').index(); // 獲取最后一個li的索引 console.log(index2); });
需要注意的是,index()方法返回的是以0為起始的整數值。
除了獲取li的索引外,我們還可以通過索引來選取對應的li元素,示例如下:
$(function(){ var $li = $('#list li:eq(2)'); // 選取第三個li $li.css('color','red'); // 將第三個li的文本顏色設置為紅色 });
通過索引可以方便地操作ul和ol列表中的元素,非常實用。