Heim > Artikel > Web-Frontend > Wie konvertiere ich eine Liste von Elementen in einem Array mit jQuery?
Wie konvertiere ich eine Liste von Elementen in einem Array mit jQuery?
- WBOYnach vorne
- 2023-08-28 11:29:061155Durchsuche
Wir können eine Liste von Elementen mit jQuery mithilfe der Methode jQuery.makeArray() oder der Methode jQuery.each() in ein Array konvertieren. Die Methode makeArray() ist die bequemste Möglichkeit, diese Aufgabe auszuführen. Mit dieser Methode wird ein Objekt in ein natives Array konvertiert.
Verwenden Sie die jQuery-Methode makeArray()
Die Methode$.makeArray() in jQuery konvertiert ein Array-ähnliches Objekt in ein JavaScript-Array. Es nimmt ein Argument und wandelt es in ein Array um.
Das Folgende ist die Syntax der Methode $.makeArray() -
$.makeArray(obj)
Hier ist obj das Objekt, das wir in ein Array konvertieren möchten.
Hier sind die Schritte, denen wir folgen werden.
Wählen Sie ungeordnete Listenelemente mit jQuery aus
Verwenden Sie die makeArray-Methode von jQuery, um eine Liste in ein Array umzuwandeln
Ordnen Sie jedes Element im Array seiner innerHTML-Eigenschaft zu
Da Sie nun über ein Array von Elementen verfügen, können Sie es als normales JavaScript-Array verwenden.
Beispiel
In diesem Beispiel verwenden wir bei jQuery die Methode $.makeArray( ), um die Liste der Elemente in ein Array umzuwandeln.
<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>
Verwenden Sie die jQueryeach()-Methode
Die Methode every() in jQuery wird zum Durchlaufen von Arrays, Objekten und allen iterierbaren Elementen verwendet. Um eine Liste von Elementen in einem Array mit jQuery zu konvertieren, befolgen wir die unten angegebenen Schritte
Verwenden Sie $(“ul li“), um alle Listenelemente auszuwählen
Erstellen Sie ein leeres Array zum Speichern von Listenelementen
Verwenden Sie die Methode every(), um alle ausgewählten Elemente zu durchlaufen
Bei jeder Iteration wird der innerText des aktuellen Listenelements in das Array „items“ verschoben.
Listenelemente im Browser anzeigen.
Beispiel
In diesem Beispiel verwenden wir die Methode $.each( ) von Jquery, um eine Liste von Elementen in ein Array umzuwandeln.
<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>
Das obige ist der detaillierte Inhalt vonWie konvertiere ich eine Liste von Elementen in einem Array mit jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!