jQuery 如何将元素列表转换为数组

我们可以使用 jQuery.makeArray() 方法或jQuery.each( )方法来将一个元素列表转换成一个数组。makeArray()方法是执行这一任务的最方便的方法。这个方法是用来将一个对象转换成一个本地数组。

使用jQuery makeArray()方法

jQuery中的 $.makeArray()方法可以将一个类似数组的对象转换为一个JavaScript数组。它需要一个单一的参数并将其转换为数组。$

以下是 .makeArray()方法的语法

$.makeArray(obj)

这里obj是一个我们想转换为数组的对象。

以下是我们将遵循的步骤。

使用jQuery选择无序的列表项
使用jQuery的makeArray方法将列表转换为一个数组
将数组中的每个项目映射到它的innerHTML属性上
现在你得到了一个元素数组，你可以把它当作一个普通的javascript数组来使用。

例子

在这个例子中，我们使用$ .makeArray( )方法将一个元素列表转换成一个数组，如果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()方法在所有选择的项目中循环。
在每个迭代中，当前列表项的内部文本被推送到 “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>