01.<html>
02.<head>
03.<title>ThaiCreate.Com jQuery Tutorials</title>
04.<style>
05. body { font-size:16px; }
06. ul { float:left; margin:0 30px; color:blue; }
07. #results { color:red; }
08.</style>
09.<script type="text/javascript" src="jquery-1.6.4.js"></script>
10.<script type="text/javascript">
11. $(document).ready(function(){
12.
13. var mappedItems = $("li").map(function (index) {
14. var replacement = $("<li>").text($(this).text()).get(0);
15. if (index == 0) {
16.
17. $(replacement).text($(replacement).text().toUpperCase());
18. } else if (index == 1 || index == 3) {
19.
20. replacement = null;
21. } else if (index == 2) {
22.
23. replacement = [replacement,$("<li>").get(0)];
24. $(replacement[0]).append("<b> - A</b>");
25. $(replacement[1]).append("Extra <b> - B</b>");
26. }
27.
28.
29.
30. return replacement;
31. });
32. $("#results").append(mappedItems);
33. });
34.</script>
35.</head>
36.<body>
37.
38. <ul>
39. <li>First</li>
40. <li>Second</li>
41. <li>Third</li>
42.
43. <li>Fourth</li>
44. <li>Fifth</li>
45. </ul>
46. <ul id="results">
47.
48. </ul>
49.
50.</body>
51.</html>
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน 
