jQuery遍历JSON填充编号div时页面显示为空如何解决

问题原因 #

问题出在HTML的id属性写法和jQuery选择器规则的冲突：

• jQuery选择器中，前缀#是id选择器的标记，代表要匹配id属性值等于#后面字符串的元素
• 你的HTML代码中id属性额外加了#，实际元素的id是#name-1、#name-2，和JS中选择器要找的name-1、name-2不匹配，所以jQuery找不到对应元素，赋值操作不生效。

解决方案 #

二选一即可，推荐使用方案1：

方案1：修正HTML的id属性 #

去掉id值里的多余#，符合前端id命名的通用规范：

<div id="name-1"> </div>
<div id="name-2"> </div>

方案2：修改JS选择器适配现有HTML #

如果不能修改HTML，可以转义选择器中的#，或者使用属性选择器：

转义写法：

$(data).each(function(i, el){
    var get_firstName = data[i].firstName;
    var nameItem = i+1;
    // 对id值自带的#做转义处理
    var outPutId = '#\\#name-' + nameItem;
                                
    $(outPutId).html(get_firstName);
});

属性选择器写法：

var outPutId = '[id="#name-' + nameItem + '"]';

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