Javascript 填充<；p>；循环中包含JSON数据的标记

我试图以18$（'.char names'）元素为目标，并使用本地JSON文件中的名称动态填充。3个控制台日志显示18个不同的id、charName、ingName，因此数据正在链接。它只是在每个插槽中用相同的名称填充$（'.char names'）。我要把头发拔出来

$.getJSON('people.json', function(data) {
    for (var i in data) {
        var charName = data[i].name;
        var imgName = data[i].image;
        var id = data[i].id;
        console.log(id);
        console.log(charName);
        console.log(imgName);

        $('.char-names').text(charName);
    }
});

HTML

<div class="faces-container">
    <img src="img/face1.jpg" class="faces">
    <p class="char-names"></p>
</div>

对于初学者，不要在阵列上使用

For in

如果

$（'.char name'）

元素的索引与数组数据相同，则可以使用这些元素的索引

$.getJSON('people.json', function(data) {
    var $charNames =  $('.char-names');
    $.each(data, function(i, obj){
          $charNames.eq(i).text(obj.name);
    });
});

---

如果索引不相同，则问题中没有提供足够的详细信息

可能是这样的。我还没有测试过

$.getJSON('people.json', function(data) {
    var charNamesArray = [];
    for (var i in data) {
        var charName = data[i].name;
        var imgName = data[i].image;
        var id = data[i].id;
        charNamesArray.push(charName);
    }
});

var charNames = document.getElementsByClassName('char-names');
for(var i = 0;i < charNamesArray.length;i++){
    charNames[i].innerHTML(charNamesArray[i]);
}

$.getJSON（'people.json'，函数（数据）{
var charNamesArray=[]；
用于（数据中的var i）{
var charName=data[i].name；
var imgName=data[i]。图像；
var id=data[i].id；
charNamesArray.push（charName）；
}
});
var charNames=document.getElementsByClassName（'char-names'）；
对于（var i=0；i

最好动态生成这些元素，因为JSON对象的条目可以是任意长度的。因此，您的JS应该是：

$.getJSON('people.json', function(data) {
    // the container
    $container = $('#container');
    // $container.empty(); // if you want to empty it first
    for (var i in data) {
        var charName = data[i].name;
        var imgName = data[i].image;
        var id = data[i].id;

        var $name = $('<p>' + charName + '</p>').addClass('faces');
        var $img = $('<img src="' + imgName + '"/>').addClass('char-names');
        var $div = $('<div></div>').append($img)
                                   .append($name)
                                   .addClass('faces-container');
        $container.append($div);
    }
});

$.getJSON（'people.json'，函数（数据）{
//容器
$container=$（“#container”）；
//$container.empty（）；//如果要先清空它
用于（数据中的var i）{
var charName=data[i].name；
var imgName=data[i]。图像；
var id=data[i].id；
var$name=$（''+charName+'
'）。addClass（'faces'）；
var$img=$（''）.addClass（'char-names'）；
变量$div=$（''）.append（$img）
.append（$name）
.addClass（“faces-container”）；
$container.append（$div）；
}
});

您的HTML应该有一个空元素（将动态填充）：

我的意思是

$（'.char name'）

选择所有

.char name

元素和

.text（charName）

将所有选定元素的文本内容更新为

charName

的值。它正在做你让它做的事。。。也许您应该根据索引过滤到特定的.char names元素？为什么不动态生成

s（或整个

s）？如果JSON中的条目太多或太少，这将是非常灵活的<代码>$。getJSON是异步的ajax。在收到数据之前，您不能处理数据

<div id='container'></div>