时间戳

首页 > 解决方案 > 如果 index 与 div 列表的索引相同，则附加对象值数组

javascript - 如果 index 与 div 列表的索引相同，则附加对象值数组

问题描述

我需要帮助：我有一个对象，里面有多个数组；我需要循环我所有的数组值，然后将此值附加到我的 HTML div 列表中（具有相同的类）。对象[0] 与 div[0]；对象[1] 与 div[1] 纠错...

这是一个例子：

<!-- HTML -->

<body>
    
    <div class="appendDiv">
        <h1>First</h1>
    </div>

    <div class="appendDiv">
        <h1>Second</h1>
    </div>

</body>


⁄⁄JS

var values = [
    {
        'name': "john"
    },
    {
        'name': "doe"
    }
]

for (var i = 0; i < values.length; i++) {
    value = values[i];
    var name = value.name;
    
    $('.appendDiv').each(function(index, val){
        if (i === index) {
            $('.appendDiv').append('<p>' + name + '</p>');
        }
    })
}

但是这个方法返回给我一个错误的结果，如下所示：

第一 约翰· 多伊

第二 约翰· 多伊

我需要这样的结果：

First（我的第一个 .appendDiv [0]） John（我的第一个数组名称值 [0]）

第二个（我的第二个 .appendDiv [1]） Doe（我的第二个数组名称值 [1]）

谢谢你。

标签： javascripthtmljqueryfor-loop

解决方案

您的Div. 您可以使用索引来查看相应的数组是否包含值。

如果您要与索引进行比较，那么代码应该有一个 if 语句来检查数据是否存在（以防止可能的空异常）。

var values = [
    {
        'name': "john"
    },
    {
        'name': "doe"
    }
]

$('.appendDiv').each(function (index) {
    var value = values[index];
    if (value && value.name) {
        $(this).append('<p>' + value.name + '</p>');
    }
});

输出：

<div class="appendDiv">
    <h1>First</h1>
    <p>john</p>
</div>
<div class="appendDiv">
    <h1>Second</h1>
    <p>doe</p>
</div>

推荐阅读