极客笔记如何使用jQuery将元素列表转换为数组
我们可以使用 jQuery.makeArray() 方法或 jQuery.each() 方法来使用jQuery将元素列表转换为数组。makeArray()方法是执行此任务的最方便的方法。该方法用于将对象转换为本机数组。
使用jQuery的makeArray()方法
jQuery的 $.makeArray() 方法将类似数组的对象转换为JavaScript数组。它接受一个参数并将其转换为数组。
以下是 $.makeArray() 方法的语法-
$.makeArray(obj)
这里obj是我们想要转换为数组的对象。
以下是我们将要执行的步骤。
- 使用jQuery选择无序列表项。
-
使用jQuery的makeArray方法将列表转换为数组。
-
将数组中的每个项映射到其innerHTML属性。
-
现在你得到了元素的数组，你可以像普通的JavaScript数组一样使用它。
示例
在这个示例中，我们使用$.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>