jQuery index()

admin發表於2017-02-20
jQueryIndex

此方法可以搜尋匹配元素，並返回元素的索引值。

如果沒有找到。就返回-1。

索引值是從0開始的。

語法結構一:

[JavaScript] 純文字檢視 複製程式碼
.index()

引數解析:

當此方法沒有引數的時候，返回值是匹配元素集合中第一個元素在其同輩元素集合中的索引位置。

jQuery1.4版本新增。

語法結構二:

[JavaScript] 純文字檢視 複製程式碼
.index(selector)

引數解析:

selector:一個選擇器，將會從此選擇器匹配的元素集合中查詢元素。

jQuery1.4版本新增。

語法結構三:

[JavaScript] 純文字檢視 複製程式碼
.index(element)

引數解析:

element:將要用於查詢的DOM元素，或者jQuery物件中的第一個元素。

jQuery1.0版本新增。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
span{
  color:red;
}
</style>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function () {
    $("span").text($(".ant_2").index());
  })
});
</script>
</head>
<body>
<div>
  <ul>
    <li>螞蟻部落一</li>
    <li class="ant_2">螞蟻部落二</li>
    <li>螞蟻部落三</li>
    <li>螞蟻部落四</li>
  </ul>
</div>
<div>位置:<span></span></div>
<input type="button" id="bt" value="檢視演示"/>
</body>
</html>

當沒有引數的時候，返回值是指定元素在其同輩元素集合中的索引位置。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
span{
  color:red;
}
</style>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function () {
    var li = document.getElementById("ant_2");
    $("span").text($("li").index(li));
  })
});
</script>
</head>
<body>
<div>
  <ul>
    <li>螞蟻部落一</li>
    <li id="ant_2">螞蟻部落二</li>
    <li>螞蟻部落三</li>
    <li>螞蟻部落四</li>
  </ul>
</div>
<div>位置:<span></span></div>
<input type="button" id="bt" value="檢視演示"/>
</body>
</html>

引數為DOM物件或jQuery物件時，返回值是DOM物件或jQuery物件集合中第一個元素在匹配元素集合中的索引。那麼上面的程式碼就是第二個li元素在$("li")獲取的集合中的索引位置。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function () {
    $("#result").text($("#ant_3").index(".ant"));
  })
});
</script>
</head>
<body>
<div>
  <ul>
    <li class="ant">螞蟻部落一</li>
    <span class="ant">螞蟻部落五</span>
    <li class="ant" id="ant_3">螞蟻部落二</li>
    <li class="ant">螞蟻部落三</li>
    <li class="ant">螞蟻部落四</li>
  </ul>
</div>
<div>位置:<span id="result"></span></div>
<input type="button" id="bt" value="檢視演示"/>
</body>
</html>

當引數為選擇器時，將會從通過此選擇器獲得的物件集合中查詢元素。那麼上面的程式碼就是在".ant"選擇器匹配的元素集合中查詢$("#ant_3")匹配的元素（如果有多個，那麼查詢第一個元素）。

相關文章