- jQuery 2.0 Development Cookbook
- Leon Revill
- 528字
- 2021-07-16 12:25:30
Populating list elements
List elements are commonly used around the Web; they can be used to display search results, menus, and navigational items to name a few. Thanks to CSS, they no longer need to be boring, and it is possible to style list elements to make your data beautiful.
With jQuery, it is possible to populate a list element dynamically. This can be done directly from a JavaScript array via an AJAX response, with data from a web server or some other source.
Getting ready
Create a blank HTML document named recipe-9.html, and ensure that it is saved to a location where the latest version of jQuery can be included.
How to do it…
Learn how to dynamically populate a list with jQuery by performing each of the following recipes:
- In order to demonstrate how you can use jQuery to populate a list element, we will create a JavaScript array of objects. Add the following HTML and JavaScript code to
recipe-9.html, which you have just created:<!DOCTYPE html> <html> <head> <title>Populating list elements</title> <script src="jquery.min.js"></script> <script type="text/javascript"> var names = [ { id: 1, firstname: 'Leon', lastname: 'Revill' }, { id: 2, firstname: 'Allyce', lastname: 'Wolverson' }, { id: 3, firstname: 'Harry', lastname: 'Round' }, { id: 4, firstname: 'Chris', lastname: 'Wilshaw' } ]; $(function(){ }); </script> </head> <body> <ul id="namelist"></ul> </body> </html> - Add the following JavaScript within
$(function(){});, just under the JavaScript array. This JavaScript will use the objects within the JavaScript array we created in the Getting ready section to populate the list element on our page.$.each(names, function(index, obj){ $('#namelist').append("<li>#" + obj.id + " " + obj.firstname + " " + obj.lastname + "</li>"); });
How it works…
We use jQuery's $.each() function to loop through each of the JavaScript objects within the names array. Then, for each of these objects, we can create a <li> element and insert the values of the id, firstname, and lastname variables. Finally, we can use the jQuery append() function to append the list element to the end of the unordered list.
Within the $.each() function, the first parameter is the array we wish to iterate through and the second parameter is the function we wish to execute for each of the objects within the names array. The specified function also has two arguments: index and obj. The index argument will contain the current array index of the JavaScript object, and the obj variable will contain the actual JavaScript object. Both these variables are available within the specified callback function.
We are then able to reference obj.propertyName (replace propertyName with a property of the object) in order to access specific parts of the object we wish to use. By doing this, we construct a string and pass it to the append() function, which then appends it to the specified #nameslist unordered list.
Open the HTML page within the browser, and you should see the list populated with the names from the JavaScript array, illustrated as follows:
See also
- Creating DOM elements
- Re-using DOM elements
- Mastering ServiceStack
- Bootstrap Essentials
- Rust Essentials（Second Edition）
- HTML5入門經典
- Linux Device Drivers Development
- Learning DHTMLX Suite UI
- Clojure Reactive Programming
- Java網絡編程核心技術詳解（視頻微課版）
- Unity Character Animation with Mecanim
- Python 3 數據分析與機器學習實戰
- FPGA嵌入式項目開發實戰
- 實戰Java高并發程序設計（第2版）
- Learning Nessus for Penetration Testing
- .NET 4.0面向對象編程漫談：應用篇
- JavaScript前端開發基礎教程