HTML添加子章节及jQuery构建录音列表问题求助

API 探路者

2026-6-17

问题排查与修正方案

核心问题分析

DOM插入位置错误：目标<section>未正确放置在sidebar的top rated章节之后，或嵌套层级混乱
元素构建逻辑错误：创建<li>后未将数据div放入其中，或未把<li>追加到<ul>内
数据遍历问题：未正确循环data.discography.recordings数组，或数组为空未做处理

修正后的代码实现

// 1. 定位sidebar与top rated章节，插入目标section
const $sidebar = $('.sidebar'); // 替换为实际sidebar选择器
const $topRatedSection = $sidebar.find('#section-top-rated'); // 替换为top rated章节的实际ID
const $recordingsSection = $('<section id="section-recordings"><h3>Recordings</h3></section>');

// 将section插入到top rated章节下方
$topRatedSection.after($recordingsSection);

// 2. 创建ul并挂载到section
const $recordingsList = $('<ul></ul>');
$recordingsSection.append($recordingsList);

// 3. 遍历数据构建DOM结构
if (data?.discography?.recordings?.length) {
  data.discography.recordings.forEach(recording => {
    // 创建li容器
    const $recordingItem = $('<li class="recording"></li>');
    // 创建数据展示div（根据实际数据字段调整内容）
    const $recordingContent = $(`
      <div class="recording-info">
        <h4>${recording.title || 'Untitled'}</h4>
        <p>发行年份：${recording.year || '未知'}</p>
        <p>风格：${recording.genre || '未指定'}</p>
      </div>
    `);
    // 按层级嵌套元素并追加到列表
    $recordingItem.append($recordingContent);
    $recordingsList.append($recordingItem);
  });
} else {
  // 空数据兜底处理
  $recordingsList.append('<li class="no-recordings">暂无录音作品</li>');
}