如何将每个h2元素的id属性设置为其自身的文本内容

document.querySelector("h2")只会匹配页面中第一个h2元素，你的代码相当于把第一个h2的固定文本值，批量赋值给了所有h2的id属性，最终所有h2的id都会和第一个h2的文本完全一致，无法实现按自身文本赋值的效果。

jQuery的.attr()方法支持传入回调函数作为属性值参数：遍历每一个匹配到的元素时，回调函数会单独执行，函数的返回值就是当前元素对应属性的取值，函数内部的this指向当前正在处理的DOM元素。
修复后的核心代码：

$(function () {
    $('h2').attr('id', function () {
        // 读取当前h2的文本，去除首尾空白后作为id值
        return this.innerText.trim();
    });
});

注意事项 #

HTML标准中id属性不允许包含空格、特殊字符，如果h2的文本存在这类内容，可以额外做格式化处理，比如把连续空格替换为短横线，避免id不符合规范：

$(function () {
    $('h2').attr('id', function () {
        return this.innerText.trim().replace(/\s+/g, '-');
    });
});

以上代码运行后，示例中三个h2的id会分别被设置为Title-1、Title-2、Title-3，完全符合预期效果。

内容的提问来源于stack exchange，提问作者João Henrique