Question

我正在使用dexie.js，这是一个indexDB包装器。 Anywhoo，我有一个从用户的本地存储调用的数组，我的函数应该遍历数据库中的每个列表项并显示它。但是，点击我的Butane后，它只会显示最新的姓名输入。

注意：您可以通过添加一些值并检查本地存储来查看整个数据库。

我的JsFiddle： https://jsfiddle.net/enzp3zws/1/

我的 html ：

<ul id="mane"></ul>

我的 js ：

var db = new Dexie("TestDatabase");
db.version(1).stores({
    friends: '++id, name, age'
});
var collection = db.friends;
var placement = document.getElementById('rainman');
var jacement = document.getElementById('rainboy');
var stacement = document.getElementById('mane');
var listed = document.createElement('li');

function addrain(){
    collection.each(function(friend){
    var element = [friend.name];
    for (var i = 0; i < element.length; i++){ 
    listed.textContent = element[i];
    document.getElementById('mane').appendChild(listed);
    //alert(element); <-- this call alerts all names in database.  
    }   
});
}

请原谅其中一些变量名称的随机性。我不知道睡眠是什么了。

Answer 1

你需要创建一个新的＆＃39; li＆＃39;元素每次：

//Remove var listed = ... line in header, then:
function addrain(){
    collection.each(function(friend){
        var element = [friend.name];
        for (var i = 0; i < element.length; i++){ 
            var listed = document.createElement('li');
            listed.textContent = element[i];
            document.getElementById('mane').appendChild(listed);
        }
        //alert(element); <-- this call alerts all names in database.  
    });
}

之前您的代码无效的原因是您只创建了一个li元素，并反复更改其文本并将其重新插入不同的位置。

Dexie.js迭代动态列表

1 个答案: