如何从HTML页面提取data属性并生成包含所有列表项的单个ul列表

嘿，这个问题我太熟悉了——你现在的代码每次遍历.year元素时，都会重新生成一个全新的<ul>，所以每个<li>都被单独包在自己的列表里。咱们只需要调整代码的结构，把<ul>的创建和闭合放在循环外面就行：

方法1：字符串拼接版（适配你原来的写法） #

// 先初始化ul的开头标签
let years = '<ul>';
$('.year').each(function(){
  // 循环里只生成li，拼接到years里
  let year = '<li>' + $(this).attr('data-year') + '</li>';
  years += year;
});
// 循环结束后，闭合ul标签
years += '</ul>';

// 最后把生成的列表添加到页面你需要的位置，比如body或者某个容器
$('body').append(years);

方法2：jQuery元素操作版（更优雅） #

如果想用更“jQuery风格”的写法，可以直接创建一个jQuery对象来操作，避免字符串拼接的繁琐：

// 先创建一个空的ul jQuery对象
const $yearList = $('<ul>');

// 遍历每个.year元素，把data-year的值作为li添加到ul里
$('.year').each(function() {
  const yearValue = $(this).attr('data-year');
  $yearList.append(`<li>${yearValue}</li>`); // 这里用ES6模板字符串更清晰
});

// 把最终的列表插入到页面目标位置
$('body').append($yearList);

为什么原来的代码不行？ #

你之前的代码是在每次循环内部都重新生成了<ul>标签，相当于每遍历一个.year，就做一次“创建ul + 加li + 闭合ul”的操作，自然会得到一堆独立的小列表。现在把ul的创建放在循环外面，循环只负责添加li元素，最后再统一闭合ul，就能得到一个包含所有li的完整列表啦～

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