求助：遍历分类entries数组并生成对应<li>元素的实现方法

看起来你已经搞定了分类按钮的生成，差的就是把每个分类下的entries转成对应的<li>元素啦！这里给你一套基于jQuery的实现思路和代码示例，适配你的场景：

核心思路 #

1. 遍历categories数组时，同时处理每个分类的entries数组，不用分开遍历
2. 如果entries里的元素是逗号分隔的字符串（比如"条目1, 条目2"），先分割成单个条目再生成<li>
3. 把按钮和对应列表绑定起来，方便后续交互（比如点击按钮切换显示对应列表）

完整代码示例 #

假设你的HTML结构有两个容器，分别放按钮和列表：

<div class="category-buttons"></div>
<div class="category-lists"></div>

对应的jQuery代码：

$(function() {
  // 这里替换成你从Contentful获取到的categories数组
  const categories = [
    { category: "健康", entries: ["饮食贴士, 运动指南", "心理健康"] },
    { category: "科技", entries: ["Web开发", "人工智能, 网络安全"] }
  ];

  const $buttonContainer = $(".category-buttons");
  const $listContainer = $(".category-lists");

  categories.forEach(category => {
    // 1. 创建分类按钮
    const $categoryBtn = $("<button>")
      .text(category.category)
      .addClass("category-btn");
    $buttonContainer.append($categoryBtn);

    // 2. 创建当前分类对应的列表容器
    const $categoryList = $("<ul>")
      .addClass("category-list")
      .hide(); // 默认隐藏，点击按钮再显示

    // 3. 遍历entries，生成每个<li>
    category.entries.forEach(entryItem => {
      // 如果entryItem是逗号分隔的字符串，先分割并清理空格
      const individualEntries = entryItem.split(",").map(item => item.trim());
      
      individualEntries.forEach(item => {
        const $listItem = $("<li>").text(item);
        $categoryList.append($listItem);
      });
    });

    // 把列表添加到页面
    $listContainer.append($categoryList);

    // 4. 绑定按钮点击事件，切换列表显示
    $categoryBtn.on("click", function() {
      $(".category-list").hide();
      $categoryList.show();
    });
  });
});

关键细节说明 #

• 如果你的entries数组里每个元素已经是单个字符串（不是逗号分隔的），直接去掉split和map那一步，直接用entryItem创建<li>就行
• 用addClass给按钮和列表加类名，方便后续写CSS样式美化
• 隐藏/显示的逻辑可以根据你的需求调整，比如默认显示第一个分类的列表，或者改成切换类名实现动画效果

如果你的Contentful数据获取有特殊处理，只需要把categories变量替换成你从API拿到的实际数据即可～

内容的提问来源于stack exchange，提问作者NYrosh