資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 jQuery 轉換陣列中元素的列表？
我們可以使用jQuery.makeArray()方法或jQuery.each()方法來使用 jQuery 將元素列表轉換為陣列。makeArray() 方法是執行此任務最方便的方法。此方法用於將物件轉換為原生陣列。
使用 jQuery makeArray() 方法
jQuery 中的$.makeArray() 方法將類似陣列的物件轉換為 JavaScript 陣列。它接受一個引數並將其轉換為陣列。
$.makeArray() 方法的語法如下：
$.makeArray(obj)
這裡 obj 是我們要轉換為陣列的物件。
以下是我們將遵循的步驟。
使用 jQuery 選擇無序列表項
使用 jQuery 的 makeArray 方法將列表轉換為陣列
將陣列中每個項對映到其 innerHTML 屬性
現在你得到了元素陣列，你可以像使用普通 javascript 陣列一樣使用它。
示例
在此示例中，我們使用 jQuery 的$.makeArray( ) 方法將元素列表轉換為陣列。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<h2>Convert list of elements in an array using jQuery</h2>
<p>Click the following button to convert list of elements in an array</p>
<button id="btn" onclick="convert( )"> Click Here </button> <br>
<h3>Given List</h3>
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
<li> Item 5 </li>
</ul>
<h3> Array of list items: </h3>
<p id="output"> </p>
<script>
// Convert function to convert a list to an array and display it
function convert() {
// Select the unordered list items using jQuery
var list = $('ul li');
// Convert the list to an array using the makeArray method of jQuery
var array = $.makeArray(list);
// Map each item in the array to its innerHTML property
let items = array.map((item) => item.innerHTML)
// Get the element with id "output" to display the result
let output = document.getElementById("output")
// Update the innerHTML of the output element with the items in square brackets
output.innerHTML = "[ " + items + " ]"
}
</script>
</body>
</html>
使用 jQuery each() 方法
jQuery 中的 each() 方法用於迭代陣列、物件和所有可迭代項。要使用 jQuery 將元素列表轉換為陣列，我們按照以下步驟操作
使用 $(“ul li”) 選擇所有列表項
建立一個空陣列來儲存列表項
使用 each() 方法迴圈遍歷所有選定的項
在每次迭代中，當前列表項的 innerText 被推送到“items”陣列中。
將列表項顯示到瀏覽器。
示例
在此示例中，我們使用 Jquery 的 $.each( ) 方法將元素列表轉換為陣列。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<h2>Convert list of elements in an array using jQuery</h2>
<p>Click the following button to convert list of elements in an array</p>
<button id="btn" onclick="convert( )"> Click Here </button> <br>
<h3>Given List</h3>
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
<li> Item 5 </li>
</ul>
<h3> Array of list items: </h3>
<p id="output"> </p>
<script>
// Function to convert list items to an array
function convert() {
// Select all list items under a 'ul' element
var list = $('ul li');
// Initialize an empty array to store list items
let items = []
// Loop through each list item
list.each(function (i, item) {
// Push the text of the current list item to the 'items' array
items.push(item.innerText)
});
output.innerHTML = "[ " + items + " ]"
}
</script>
</body>
</html>
更新於：2023年2月21日
5K+ 瀏覽量
廣告