Miscellaneous-DOM Element Methods

Posted on Edited on In Views: Disqus:

 

Miscellaneous-DOM Element Methods 的方法有

.get()、.index()、.toArray()

 

一、.get()

用來將 jQuery object 轉成元素。

有兩種多載方法

.get( index )

.get()

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>
    <ul>
        <li class="first-item">list item 1</li>
        <li class="second-item">list item 2</li>
        <li class="third-item">list item 3</li>
        <li class="fourth-item">list item 4</li>
        <li class="fifth-item">list item 5</li>
    </ul>
</body>

</html>

 

$("li").get();

其結果為

 

$("li").get(1);

其結果為

 

二、.index()

回傳所找尋目標在兄弟間的 index 是多少。

 

有三種多載方法

.index()

.index( Selector selector )

.index( element element ) element Type: Element or jQuery

 

範例：

1、.index()

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>
    <ul>
        <li class="first-item">list item 1</li>
        <li class="second-item">list item 2</li>
        <li class="third-item">list item 3</li>
        <li class="fourth-item">list item 4</li>
        <li class="fifth-item">list item 5</li>
    </ul>
</body>

</html>

 

$("li").index();

其結果為

說明：

有多個符合條件時，將會回傳第一個符合條件的索引，注意是zero-based。

 

2、.index( Selector selector )

承上例

$(".third-item").index("li");

其結果為

說明：

selector 裡要放的是集合，如果是非集合就找不到了，如下例

$("li").index(".third-item");

其結果為

 

3、.index( element element )

承上例

var listItem = $(".third-item");
$("li").index(listItem);

其結果為

 

三、.toArray()

將 jQuery object 變成 array。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <ul>
        <li id="foo">foo</li>
        <li id="bar">bar</li>
        <li id="baz">baz</li>
    </ul>
</body>
</html>

於console端輸入

$( "li" ).toArray()

即可得到一陣列。