Convert jquery array to list collection

In front-end development, we often use the jQuery library to simplify some operations, and converting an array into a list collection is also one of the common operations. This article will introduce how to use jQuery to convert an array into a list collection.

1. Use jQuery.each() method

jQuery.each() method can traverse the array and add each element to a new list collection . The following is a sample code:

var arr = [1, 2, 3, 4, 5];
var list = $('<ul>'); // 创建一个空的<ul>元素
$.each(arr, function(index, value) {
  var li = $('<li>').text(value); // 创建一个<li>元素，并将数组中的值作为文本内容添加到<li>中
  list.append(li); // 将<li>添加到<ul>中
});
$('body').append(list); // 将<ul>添加到页面中

In the above code, we first create an empty ul element, and then use the each() method to traverse the array. During the traversal process, we create an li element and add the array to The value in is added as text content to the li, and finally the li is added to the ul element. Finally, we add the ul element to the page.

2. Use the jQuery.map() method

The jQuery.map() method can convert an array into a new array or object. We can use this method to convert each element in the array into a li element, and then add these li elements to a new list collection. The following is a sample code:

var arr = [1, 2, 3, 4, 5];
var listItems = $.map(arr, function(value) {
  return $('<li>').text(value);
});
var list = $('<ul>').append(listItems);
$('body').append(list);

In the above code, we first use the map() method to convert each element in the array into a li element, and save these li elements in a new array. We then create an empty ul element and add each li element in the array to the ul element. Finally, we add the ul element to the page.

3. Use jQuery to implement the template engine

jQuery can convert the array into a list collection through the template engine. We can use a template engine to convert each array element into an HTML string and add these HTML strings to a new list collection. The advantage of using a template engine is that you can more flexibly control the output HTML content. The following is a sample code:

var arr = [1, 2, 3, 4, 5];
var template = '<li>{value}</li>'; // 模板字符串
var listItems = $.map(arr, function(value) {
  return template.replace('{value}', value); // 使用模板字符串替换值
});
var list = $('<ul>').append(listItems);
$('body').append(list);

In the above code, we define a template string and use the map() method to replace each element in the array with the value variable in the template string. We then create a new list collection using the HTML string generated by the template and add it to the page.

Summary

In front-end development, converting an array into a list collection is one of the very common operations. This article introduces how to use jQuery's each() method, map() method, and template engine to achieve this operation. Using jQuery allows us to process array data more conveniently and quickly convert it into HTML elements.

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