首頁  >  文章  >  web前端  >  如何使用 jQuery 轉換數組中的元素列表?

如何使用 jQuery 轉換數組中的元素列表?

WBOY
WBOY轉載
2023-08-28 11:29:061196瀏覽

如何使用 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中文網其他相關文章!

陳述:
本文轉載於:tutorialspoint.com。如有侵權,請聯絡admin@php.cn刪除