jQuery點選的是第幾個li元素

admin發表於2017-03-26
jQuery

在不少的操作中都有這樣的需求，那就是獲取li元素在li元素列表中的位置，下面就通過程式碼例項介紹一下如何利用jquery獲取當前點選的li元素的位置，希望能夠給需要的朋友帶來一定的幫助。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.list li{
  list-style:none;
  cursor:pointer;
  font-size:12px;
  line-height:30px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".list li").click(function(){
    $("#show").text($(this).index())
  })
})
</script>
</head>
<body>
<div id="show"></div>
<div class="list">
  <ul>
    <li>螞蟻部落歡迎您的到來。</li>
    <li>只有努力奮鬥才會有美好的明天</li>
    <li>沒有人一開始就是高手，必須要靠努力。</li>
    <li>每一天都是新的請好好的珍惜。</li>
    <li>當前的時間最為可貴，下一秒都是虛幻的。</li>
    <li>沒有勞動的活著，沒有任何意義。</li>
    <li>實現自我價值才是人生的目的。</li>
  </ul>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，其實沒有什麼難度，就是利用了index()函式。

index()函式更多內容可以參閱jQuery index()一章節。

相關文章