如何使用 jQuery 转换数组中的元素列表？-js教程-PHP中文网

使用 jQuery makeArray() 方法

示例

使用 jQueryeach() 方法

首页

web前端

js教程

如何使用 jQuery 转换数组中的元素列表？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 28, 2023 am 11:29 AM

如何使用 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>

登录后复制

使用 jQueryeach() 方法

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>

登录后复制

以上是如何使用 jQuery 转换数组中的元素列表？的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn