排序javaScript创建的div
[英]Sorting javaScript created divs
问题描述
Hay I have a problem with sorting divs from createElement function. 
Hay我在从createElement函数排序div时遇到问题。
Problem: I create divs from database-items which are align in row (latest item on the end) 问题：我从在行中对齐的数据库项创建div（末尾的最新项）
What I want: Display the Items in reversed direction. 我想要的是：以相反的方向显示项目。 The latest item added to the database should appear as first item in the stream (like a newsstream on facebook). 添加到数据库中的最新项目应显示为流中的第一项（如Facebook上的新闻流）。
Question: How can I change just the direction the divs are loaded/created? 问题：如何更改div的加载/创建方向？
Further I thought about a technique to set an individual ID to each div created, for sorting them later by ID (Id could be ongoing numbers). 进一步，我想到了一种为创建的每个div设置一个单独的ID的技术，以便以后按ID（ID可以是正在进行的数字）对它们进行排序。 I found this one but it don´t works while i does not increment the ID-number: Javascript create divs with different ids 我找到了这个，但我没有增加ID号却没有用： Javascript创建具有不同ID的div
I know there are many Questions like this on stackoverflow, and I tried several before, with no success for my issue. 我知道在stackoverflow上有很多类似这样的问题，我之前曾尝试过几次，但都没有成功。
Check out my Code: 查看我的代码：
//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>
Thanks for helping :) 感谢您的帮助:)
2 个解决方案
解决方案1
0 2017-09-05 12:13:56
1.Why not query them descendent from db? 1.为什么不查询它们的后代？ :)) :)）
2. 2。
card.childNodes.length
? card.insertBefore(cardtitle, card.childNodes[0])
: card.appenChild(cardtitle);
解决方案2
0 已采纳 2017-09-05 12:14:09
since you are using jquery instead of 由于您使用的是jQuery而不是
document.body.appendChild(card);
use 采用
$('body').prepend($(card))
you can mark up the area with an id you want to add them into so that it does not insert into the top of your document like 您可以使用要添加到其中的ID来标记该区域，这样它就不会像
$('#elementid').prepend($(card))
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.