suchen

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?

WBOY
WBOYnach vorne
2023-08-28 11:29:061195Durchsuche

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

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!

JavaScript jquery 循环 对象 innerHTML ul li
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Richten Sie die WP-REST-API mit Standardauthentifizierung ein und verwenden Sie sieNächster Artikel：Richten Sie die WP-REST-API mit Standardauthentifizierung ein und verwenden Sie sie

In Verbindung stehende Artikel

Mehr sehen