首頁 > 文章 > web前端 > jQuery中包裝集get()方法與index()方法的使用實例詳解

jQuery中包裝集get()方法與index()方法的使用實例詳解

伊谢尔伦原創: 2017-06-19 14:19:491904瀏覽

jquery允許把包裝集當成javascript數組進行處理，可以利用簡單的陣列下標，也就是透過位置來取得包裝序列裡的任何元素。

例如，從頁面上帶有alt屬性的所有a1f02c36ba31691bcfe87b2722de723b元素的集合中取得第一個元素，可以這樣寫：

$(&#39;img[alt]&#39;)[0]

如果更喜歡使用方法而不是陣列下標，可以利用jquery定義的get()方法來達到目的。

get語法：get(index)

取得包裝集裡的一個或所有符合元素。如果不指定參數，包裝集裡的所有元素都以javascript數組的形式傳回；如果指定了下標參數，就傳回下標所對應的元素。

$("img[alt]").get(0)

等效於前面利用陣列下標的範例，即：$("img[alt]")[0]。 get()方法也可用來把元素包裝集轉換為普通的javascript數組，思考：

var allLabeledButtons = $("lable+button").get();

這個語句把頁面上前面是近鄰2e1cf0710519d5598b1f0f14c36ba674元素的所有bb9345e55eb71822850ff156dfde57c8元素包裝到jquery包裝器裡，然後創建由那些元素所組成的javascript數組，賦值為變數allLableedButtons

可以利用逆運算，取得包裝集裡特定元素的下標。假定因為某個理由，想要知道在頁面上整個圖像集裡id為findMe的圖像的順序下標，可用以下語句獲取下標

var n = $("img").index($(&#39;img#findMe&#39;)[0]);

index()語法：index(element)

在包裝集裡尋找傳入的元素，並傳回該元素在包裝集裡的順序下標；如果該元素不在包裝集裡，則傳回-1

jquery的get() 函數取得所有匹配DOM元素的集合，可以直接操作DOM對象而不是JQuery對象，其返回值為元素數組

#例子：選擇文檔中所有圖像作為元素數組，並用數組內建的reverse 方法將數組反向。

html程式碼

<img src="1.jpg" /><img src="2.jpg">

jquery程式碼

$("img").get().reverse();

結果

[ <img src="2.jpg" /><img src="2.jpg">]

get(index)方法為取得對應位置的匹配元素，即第index個匹配元素，這能夠讓你選擇一個實際的DOM 元素並且對他直接操作，而不是透過jQuery 函數。 $(this).get(0)與$(this)[0]等價。

index()方法：傳回值為number類型，搜尋匹配的元素並傳回對應的索引值，從0開始，如果不給.index() 方法傳遞參數，那麼傳回值就是這個jQuery物件集合中第一個元素相對於其同儕元素的位置。如果參數是一組DOM元素或jQuery對象，那麼傳回值就是傳遞的元素相對於原先集合的位置。如果參數是選擇器，那麼回傳值就是原先元素相對於選擇器匹配元素中的位置。如果找不到符合的元素，則傳回-1。

html程式碼

foo 
bar 
baz

jquery程式碼

$(&#39;li&#39;).index(document.getElementById(&#39;bar&#39;)); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
$(&#39;li&#39;).index($(&#39;#bar&#39;)); //1，传递一个jQuery对象
$(&#39;li&#39;).index($(&#39;li:gt(0)&#39;)); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
$(&#39;#bar&#39;).index(&#39;li&#39;); //1，传递一个选择器，返回#bar在所有li中的做引位置
$(&#39;#bar&#39;).index(); //1，不传递参数，返回这个元素在同辈中的索引位置。

下面在看一個範例：

<!DOCTYPE html>
<html>
<head>
  <style>
  b, span, p, html body {
    padding: .5em;
    border: 1px solid;
  }
  b { color:blue; }
  strong { color:red; }
  </style>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
  <p>
    <p>
      <span>
        <b>我的父元素是：</b>
      </span>
    </p>
  </p>

<script>
var parentEls = $("b").parents()
            .map(function () { 
                  return this.tagName; 
                })
            .get().join(", ");
$("b").append("<strong>" + parentEls + "</strong>");
</script>

</body>
</html>

結果如下圖所示：

以上是jQuery中包裝集get()方法與index()方法的使用實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：詳細介紹jQuery select操作方法下一篇：詳細介紹jQuery select操作方法

看更多