排序javaScript創建div

乾草我有一個從createElement函數排序div的問題。排序javaScript創建div

問題： 創建從中行對齊數據庫項目的div（上月底最新的項目）

我想要什麼： 顯示在反方向的項目。添加到數據庫的最新項目應該顯示爲流中的第一項（如facebook上的newsstream）。

問題： 如何更改div的加載/創建方向？

此外，我想過一種技術，將個人ID設置爲創建的每個div，以便隨後通過ID對ID進行排序（ID可以是正在進行的數字）。我發現這一個，但它鴕鳥政策作品，而我不遞增的ID號：Javascript create divs with different ids

我知道有很多類似這樣的問題上計算器，我試了幾個之前，沒有成功我的問題。

看看我的代碼：

//create firebase reference 
 
var dbRef = new Firebase("….com/"); 
 
var contactsRef = dbRef.child('contacts') 
 

 
//load all contacts 
 
contactsRef.on("child_added", function(snap) { 
 
//console.log(snap.val()) 
 
    snap.forEach(function(childSnapshot) { 
 
     var key = childSnapshot.key(); 
 
     var childData = childSnapshot.val(); 
 

 

 
     var divCount = 0; 
 

 
    //create divs from database-elements 
 
    var card = document.createElement('div'); 
 
    card.id = 'div'+divCount; 
 
    card.setAttribute('class', 'linkprev'); 
 
    document.body.appendChild(card); 
 

 
    var cardtitle = document.createElement('div'); 
 
    cardtitle.setAttribute('class', 'cardtitle'); 
 
    cardtitle.innerHTML = childData; 
 
    card.appendChild(cardtitle); 
 
    document.guteUrls.execute(); 
 

 
    divCount++; 
 
    
 

 
console.log(event); 
 

 
//linkify plugin to convert div-elements (strings) to hyperlinks 
 
$('div').linkify(); 
 
$('#sidebar').linkify({ 
 
    target: "_blank" 
 
}); 
 

 
}); 
 
}); 
 

 

 
//save contact 
 
document.querySelector(".addValue").addEventListener("click", function(event) { 
 
    event.preventDefault(); 
 
    if(document.querySelector('#url').value != '' && document.querySelector('#url').value.charAt(0) == "h" && document.querySelector('#url').value.charAt(3) == "p"){ 
 
    contactsRef.push({ 
 
     name: document.querySelector('#url').value,}) 
 
     contactForm.reset();} 
 
    else { 
 
    alert('Oops, seems like an error…'); 
 
    } 
 
}, false);

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <title>frontendpublishing-test</title> 
 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="http://cdn.embed.ly/jquery.preview-0.3.2.css" /> 
 
    <link href="css/flexboxgrid.min.css" rel="stylesheet"> 
 
    
 
    <style type="text/css"> 
 
    #contacts p, 
 
    #contacts p.lead{ 
 
     margin: 0; 
 
    } 
 
    </style> 
 

 
</head> 
 
<body> 
 
    <div class="container"> 
 
    <h1>Titel h1</h1> 
 
    <hr/> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
     <form method="post" name="contactForm"> 
 
      <div class="form-group">    
 
      <input id="url" type="url" required name="url" placeholder="share a good article/blog/topic" class="input"> 
 
      <button type="submit" class="btn btn-primary addValue">Submit</button> 
 
      </form> 
 
     
 

 
<!-- <script> 
 
    $document.ready(function){ 
 
     document.getElementsByClassName('linkified'); 
 
     {console.log("linkified")}; 
 

 
    }; 
 
            </script> 
 
--> 
 

 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
    <!-- Latest compiled and minified Bootstrap --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
    <!-- Include Firebase Library --> 
 
    <script src="https://cdn.firebase.com/js/client/2.2.3/firebase.js"></script> 
 
    <!-- Contacts Store JavaScript --> 
 
    <script src="script.js"></script> 
 

 
    <script src="linkify.min.js"></script> 
 

 
    <script src="linkify-jquery.min.js"></script> 
 
    
 
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> 
 
    
 

 
    <script async src="https://guteurls.de/guteurls.js" 
 
    
 
    selector='.linkprev' 
 
    gif="http://loading.io/assets/img/default-loader.gif" 
 
    callback-a="(function(jqueryElement,url,$){console.log('url:'+url)})" 
 
    callback="(function($){console.log('finished')})" 
 
    init="(function($){console.log('JS will start to search URLs now')})" 
 
    ></script> 
 

 
</body> 
 
</html>

感謝您的幫助:)

來源

2017-09-05 bengraf

爲什麼不用SQL對它進行排序？ –

問題太簡單了：因爲我不知道該怎麼辦。我希望有一個簡單的方法使用jquery/javaScript。我將看看它如何與SQL一起工作。感謝到目前爲止 – bengraf

您可以簡單地添加到您的SQL語句'ORDER BY DESC' –

，因爲你正在使用的不是

document.body.appendChild(card);

使用

$('body').prepend($(card))

jQuery的你可以標記你想一個ID中的區域添加它們，以便它不會插入到文檔的頂部，如

$('#elementid').prepend($(card))

來源

2017-09-05 12:14:09 jidexl21

非常容易！謝謝 – bengraf

1.爲什麼無法查詢他們從數據庫的派生？ :)）

card.childNodes.length 
    ? card.insertBefore(cardtitle, card.childNodes[0]) 
    : card.appenChild(cardtitle);

來源

2017-09-05 12:13:56 bluehipy

排序javaScript創建div

回答

相關問題