jquery實現的倒數獲取li元素簡單介紹

antzone發表於2017-04-03
jQuery

本章節分享一段程式碼例項，它實現了倒數獲取li元素的功能。

比如我要獲取倒數第二個li元素，下面就是此功能的演示。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
  var text=$("#box li").eq(-2).text();
  $("#show").text(text);
});
</script>
</head> 
<body> 
<ul id="box">
  <li>只有努力奮鬥才會有美好的未來。</li>
  <li>沒有人一開始就是高手，必須要好好學習。</li>
  <li>分享互助是進步的最大源動力。</li>
  <li>每一天都是新的要好好真心</li>
</ul>
<div id="show"></div>
</body> 
</html>

上面的程式碼實現了我們的要求，實現的原理也非常的簡單。

大家eq()的引數為0的時候就是獲取第一個元素，為1的時候就是第二個元素，以此類推。

所以當引數為-1的時候理所當然就是倒數第一個，那麼-2就是倒數第二個，以此類推。

相關閱讀:

（1）.eq()方法可以參閱jQuery eq()一章節。

（2）.text()方法可以參閱jQuery text()一章節。

相關文章