Append 數組的 object 值，如果索引是 div 列表的相同索引

Question

我需要幫助：我有一個 object，里面有多個陣列； 我需要循環我的所有數組值，然后循環 append 這個值在我的 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 （我的 first.appendDiv [0]） John （我的第一個數組名稱值 [0]）

第二個（我的 second.appendDiv [1]） Doe （我的第二個數組名稱值 [1]）

謝謝你。

Answer 1

您的Div上的每個循環只需要 1 個。 您可以使用索引來查看相應的數組是否包含值。

如果您正在與索引進行比較，那么代碼應該有一個 if 語句來檢查數據是否存在（以防止可能的 null 異常）。

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

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

Output：

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

Append 數組的 object 值，如果索引是 div 列表的相同索引

問題描述

1 個解決方案

解決方案1
0 已采納 2020-12-18 23:28:24

Append 數組的 object 值，如果索引是 div 列表的相同索引

問題描述

1 個解決方案

解決方案1 0 已采納 2020-12-18 23:28:24

解決方案1
0 已采納 2020-12-18 23:28:24