Question

鉴于下面的简单JSON，我如何使用jQuery逐个将每个结果附加到DOM中？

每个新结果在添加到DOM之前应该有3秒的延迟，并且该过程应该反复循环（我将在特定点删除最旧的结果）。

以下是应该发生的事情：

<div class="001"><p>text</p></div>

<!-- (3 seconds delay than add) -->
<div class="002"><p>text</p></div>

<!-- (3 seconds delay than add) -->
<div class="003"><p>text</p></div>

<!-- (3 seconds delay than add the first one back in if there is no more) -->
<div class="001"><p>text</p></div>

---- json数据-----

{
    "results": [
        {
            "id": 001,
            "text": "text one",
        },
        {
            "id": 002,
            "text": "text two",
        },
        {
            "id": 003,
            "text": "text three",
        }
    ]
}

Answer 1

这是一个函数，可以在每个项目的附加项之间以给定的延迟（以毫秒为单位）向父项添加数据：

function addDataWithDelay(parent, data, delay) {
    var index = 0;
    function add() {
        if (index < data.length) {
            var item = data[i];
            $(parent).append('<div class="' + item.id + '"><p>' + item.text + '</p></div>');
            ++index;
            setTimeout(add, delay);
        }
    }
    add();
}

parent是要将项目追加到
的父元素或选择器
data是具有id和text属性的对象数组 - 在您的情况下，这将是结果数组

延迟是每次添加之间的时间量（以毫秒为单位）

如何使用jquery逐个附加每个JSON对象

1 个答案: