排序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

回答

相关问题