一、基本概念
在編寫代碼時我們通常會遇到需要將數據進行分組的情況，列表分組就是其中一種常見的形式。列表分組通常是將相同屬性的數據集合在一起，以方便展示和處理。
在前端應用中，通常使用分組列表來展示數據結構。分組列表包括兩個部分：分組標題和組內列表項。分組標題可以是一個固定的字元串，也可以是來自數據源的一個動態值。組內列表項是一系列數據集合，通常具有相同屬性，例如名稱、價格、日期等。
在本篇文章中，我們將關注如何使用JavaScript和CSS編寫一個簡單的分組列表，並在其中提供大量代碼示例。
二、基本頁面結構
在開始編寫分組列表之前，我們需要了解一個基本的HTML頁面結構。本文將使用一個簡單的HTML頁面作為樣例，並在之後添加CSS和JavaScript代碼實現分組列表。以下是我們的HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>List Grouping</title>
</head>
<body>
<div id="list-container">
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</body>
</html>
如上所示，我們編寫了一個包含一個ul標籤的HTML頁面。在之後的CSS和JavaScript代碼中，我們將對此進行修改，以創建一個分組列表。
三、創建分組標題
在創建分組列表時，我們需要將每組數據包括在一個div中，並添加一個自定義的標題來標識此組數據。以下是一個示例代碼片段：
<div class="group">
<h3 class="title">Group 1</h3>
<ul class="items">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
</div>
<div class="group">
<h3 class="title">Group 2</h3>
<ul class="items">
<li class="item">Item 4</li>
<li class="item">Item 5</li>
</ul>
</div>
在上面的例子中，我們使用一個div元素來封裝每個組的數據，並在每個組中添加一個自定義標題（h3元素）。為了使樣式易於管理，我們還分別給每個元素添加了一個類名。
四、使用JavaScript動態生成列表項
在上一步中，我們創建了兩個分組，並手動添加了一些列表項。不過在實際應用中，我們通常需要從數據源中動態生成列表項。以下代碼演示了如何使用JavaScript來動態地生成分組列表：
// 創建一個用於保存所有列表項的數組
var items = [
{ group: "Group 1", name: "Item 1" },
{ group: "Group 1", name: "Item 2" },
{ group: "Group 1", name: "Item 3" },
{ group: "Group 2", name: "Item 4" },
{ group: "Group 2", name: "Item 5" },
];
// 獲取用於顯示分組列表的容器
var listContainer = document.getElementById("list-container");
// 遍曆數據源，生成每個分組的列表
for (var i = 0; i < items.length; i++) {
// 獲取當前列表項所屬的分組
var groupName = items[i].group;
// 檢查是否已經存在包含此名稱的分組
var groupElement = document.querySelector(".group[data-name='" + groupName + "']");
if (!groupElement) {
// 如果不存在則創建一個新的分組
groupElement = document.createElement("div");
groupElement.classList.add("group");
groupElement.dataset.name = groupName;
// 添加分組標題
var titleElement = document.createElement("h3");
titleElement.classList.add("title");
titleElement.textContent = groupName;
groupElement.appendChild(titleElement);
// 添加新分組到容器中
listContainer.appendChild(groupElement);
}
// 創建一個包含當前列表項名稱的li元素，並添加到當前分組中
var itemElement = document.createElement("li");
itemElement.classList.add("item");
itemElement.textContent = items[i].name;
groupElement.querySelector(".items").appendChild(itemElement);
}
在上面的代碼中，我們使用了一個基本的JavaScript數據源，其中包含了5個列表項，每個列表項屬於一個分組。我們遍歷該數據源，並針對每個分組創建了一個新的包含標題和列表項的div元素。並且我們使用了一個自定義的HTML屬性來存儲分組名稱。
此外，我們還創建了一個包含列表項名稱的li元素，並添加到每個分組的ul元素中。請注意，我們在此處使用了JavaScript的querySelector函數來查找當前分組的ul元素。
結論
在本文中，我們討論了如何使用JavaScript和CSS創建一個基本的分組列表。我們介紹了分組列表的基本概念，提供了一個基本的HTML頁面結構，並演示了如何創建和動態生成分組列表項。
我們希望本文能夠幫助你更好地理解分組列表的設計和實現過程，並為你提供代碼示例。如果你有任何疑問或建議，請隨時在評論區中給我們留言。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/244116.html
微信掃一掃 
支付寶掃一掃 