如何扭转一个火力点列表与JavaScript

我“的insertBefore”试过了，“insertAdjacentHTML”，“反向（）”，但我没有预期的结果（无序或白屏）...

你有什么想法吗？

谢谢！

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Classement TOP 10</title> 
<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script> 
<script> 
    (function(){ 
// Initialize Firebase 
var config = { 
    databaseURL: "https://XXXXXXXX.firebaseio.com" 
    }; 
firebase.initializeApp(config); 

var userDataRef = firebase.database().ref("users").orderByChild('points').limitToLast(10); 

userDataRef.once("value") 
    .then(function(snapshot) { 
    snapshot.forEach(function(childSnapshot) { 
     var firstName_val = childSnapshot.val().firstName; 
     // console.log(firstName_val); 
     var lastName_val = childSnapshot.val().lastName.substr(0,1); 
     // console.log(lastName_val); 
     var points_val = childSnapshot.val().points; 
     // console.log(points_val); 

     var x = document.createElement("li"); 
     var t = document.createTextNode(firstName_val + " " + lastName_val + ". - " + points_val + " points"); 
     x.appendChild(t); 
     document.getElementById("classement").appendChild(x); 

    }); 
}); 
}()); 
</script> 
</head> 

<body> 
    <div> 
     <ol id="classement"></ol> 
    </div> 
</body> 

</html>

来源

2017-09-01 Lharnisch

'我试着用 “的insertBefore”， “insertAdjacentHTML”'在哪里？显示它，我们可以告诉你你是如何做错的 –

使用的insertBefore：

.then(function(snapshot) { 
    var tgt = document.getElementById("classement"); 
    snapshot.forEach(function(childSnapshot) { 
     /// ... 
     tgt.insertBefore(x, tgt.firstChild); 
    });

，或者把快照变成一个真正的数组，使用此：

const snapshotToArray = snapshot => { 
    const ret = []; 
    snapshot.forEach(childSnapshot => { 
     ret.push(childSnapshot); 
    }); 
    return ret; 
};

（正如我不是火力，上述熟悉不够可能是矫枉过正，如果快照是可迭代的，那么你可能不需要上述函数，它可能是Array.from（快照）从快照创建数组的情况）

在你的代码，这样使用它：

.then(function(snapshot) { 
    snapshotToArray(snapshot).reverse().forEach(function(childSnapshot) { 
     // your code unchanged 
    }) 
})

来源

2017-09-01 23:38:49

你的第一个选择（insertBefore）似乎工作！ :-) – Lharnisch

哪个代码？ 'insertBefore'或转换为数组？ –

您使用insertBefore的解决方案 – Lharnisch

如何扭转一个火力点列表与JavaScript

回答

相关问题