Wie konvertiere ich eine Liste von Elementen in einem Array mit jQuery?-js-Tutorial-php.cn

Wie konvertiere ich eine Liste von Elementen in einem Array mit jQuery?

WBOY

Freigeben： 2023-08-28 11:29:06

nach vorne

1238 Leute haben es durchsucht

如何使用 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)

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!