cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menukar senarai elemen dalam tatasusunan menggunakan jQuery?

Bagaimana untuk menukar senarai elemen dalam tatasusunan menggunakan jQuery?

WBOY
WBOYke hadapan
2023-08-28 11:29:061204semak imbas

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

Kita boleh menukar senarai elemen kepada tatasusunan menggunakan jQuery menggunakan kaedah jQuery.makeArray() atau jQuery.each() kaedah. Kaedah makeArray() ialah cara yang paling mudah untuk melaksanakan tugas ini. Kaedah ini digunakan untuk menukar objek kepada tatasusunan asli.

Gunakan kaedah jQuery makeArray()

Kaedah

$.makeArray() dalam jQuery menukar objek seperti tatasusunan kepada tatasusunan JavaScript. Ia memerlukan hujah dan menukarnya kepada tatasusunan.

Berikut ialah sintaks kaedah $.makeArray() - 

$.makeArray(obj)

Di sini obj ialah objek yang ingin kita tukar kepada tatasusunan.

Berikut adalah langkah-langkah yang akan kami ikuti.

  • Pilih item senarai tidak tersusun menggunakan jQuery

  • Gunakan kaedah makeArray jQuery untuk menukar senarai kepada tatasusunan

  • Peta setiap item dalam tatasusunan kepada harta HTML dalamannya

  • Sekarang anda mempunyai tatasusunan elemen, anda boleh menggunakannya sebagai tatasusunan JavaScript biasa.

Contoh

Dalam contoh ini, jika jQuery, kami akan menggunakan kaedah $.makeArray( ) untuk menukar senarai elemen kepada tatasusunan. 

<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>

Gunakan kaedah jQueryeach()

Kaedah each() dalam jQuery digunakan untuk lelaran ke atas tatasusunan, objek dan semua item boleh lelaran. Untuk menukar senarai elemen dalam tatasusunan menggunakan jQuery, kami ikuti langkah yang diberikan di bawah

  • Gunakan $(“ul li”) untuk memilih semua item senarai

  • Buat tatasusunan kosong untuk menyimpan item senarai

  • Gunakan setiap() kaedah untuk mengulangi semua item yang dipilih

  • Pada setiap lelaran, Teks dalaman item senarai semasa ditolak ke dalam tatasusunan "item".

  • Paparkan item senarai ke penyemak imbas.

Contoh

Dalam contoh ini, kami menggunakan kaedah $.each( ) Jquery untuk menukar senarai elemen kepada tatasusunan. 

<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>

Atas ialah kandungan terperinci Bagaimana untuk menukar senarai elemen dalam tatasusunan menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript jquery 循环 对象 innerHTML ul li
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Sediakan dan gunakan WP REST API dengan Pengesahan AsasArtikel seterusnya：Sediakan dan gunakan WP REST API dengan Pengesahan Asas

Artikel berkaitan

Lihat lagi