jQuery循环生成分页列表时获取section ID值出错问题排查

你的问题出在错误地覆盖了section元素的id属性，把它从原本的字符串值（比如name1）改成了一个DOM元素对象，导致后续拼接时输出了[object HTMLElement]。

错误原因拆解 #

来看这行引发问题的代码：

sections[i].id=document.getElementById(sections[i].id);

• 原本sections[i].id是字符串类型的ID值（比如"name1"）
• 你用document.getElementById(sections[i].id)获取到了当前section对应的DOM元素，然后把这个元素赋值给了sections[i].id
• 这就导致sections[i].id不再是字符串，而是一个HTMLElement对象，当你把它拼接到HTML字符串里时，JS会自动把对象转成字符串[object HTMLElement]

修正方案 #

你完全不需要这行错误的赋值代码，因为sections[i]本身就是你要操作的section元素，它的id属性本来就存储着你需要的字符串（name1、name2等）。直接删除这行代码即可：

for( var i = 0; i < sections.length; i++){ 
    _addClass(sections[i], "ops-section") 
    sections[i].dataset.index = i + 1; 
    // 删掉这行错误代码：sections[i].id=document.getElementById(sections[i].id);
    if(settings.pagination == true) { 
        paginationList += '<li><a data-index="' + (i + 1) + '" href="#' + (i + 1) + '"></a><p class="lead">' + sections[i].id + '</p></li>'; 
    }
}

额外小提示（可选） #

如果你的分页链接的锚点是想直接跳转到对应的section（而不是#1这种索引值），可以把href的值改成section的ID：

href="#' + sections[i].id + '"

这样点击链接会直接定位到id="name1"的section元素，更符合锚点的常规用法。

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