Rumah > Artikel > hujung hadapan web > Bagaimana untuk menukar senarai elemen dalam tatasusunan menggunakan jQuery?
Bagaimana untuk menukar senarai elemen dalam tatasusunan menggunakan jQuery?
- WBOYke hadapan
- 2023-08-28 11:29:061155semak imbas
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!