How to convert string to list collection in jquery

jQuery is a popular JavaScript library that provides tools to simplify DOM manipulation and achieve dynamic effects. In many web applications, we need to convert strings into list collections for better data processing and presentation. This article will introduce you to how to use jQuery to convert a string into a list collection.

1. Use the split method

The split() method can split a string into an array, using the specified delimiter. Therefore, we can use the split() method to split the string into an array, and then use jQuery's each() method to add the array elements to the list collection.

For example:

var str = "苹果、香蕉、橙子、葡萄、梨子";
var arr = str.split("、");
var $ul = $("<ul>");

$.each(arr, function(index, value) {
  var $li = $("<li>").text(value);
  $ul.append($li);
});

$("body").append($ul);

In the above example code, we first define a string containing multiple fruit names, and use "," as the separator to use the split() method to It is divided into an array. Next, we create an empty list collection and use jQuery's each() method to iterate through each element in the array, encapsulate it into a list item element, and append it to the list collection.

2. Use jQuery’s map() method

Another way to convert a string into a list collection is to use jQuery’s map() method, which splits the string into an array. and returns an array containing list item elements. One thing to note about this method is that after the map() method, the get() method must be used to convert the returned DOM element array back to a jQuery collection.

For example:

var str = "苹果、香蕉、橙子、葡萄、梨子";
var arr = str.split("、");

var $lis = $.map(arr, function(value) {
  return $("<li>").text(value)[0];
});

var $ul = $("<ul>").append($lis);
$("body").append($ul);

In the above sample code, we first use the split() method to split the string into an array, and use jQuery's map() method to convert the array into An array containing list item elements. Next, we create an empty list collection and add list item elements to the list collection using the append() method. Finally, we attach the list collection to the page.

Summary

This article introduces two methods of converting a string into a collection of lists using jQuery: using the split() method to split the string into an array and using the each() method or using jQuery The map() method converts an array into an array containing list item elements. These methods can help you work with data and presentations more efficiently.

The above is the detailed content of How to convert string to list collection in jquery. For more information, please follow other related articles on the PHP Chinese website!