排序javaScript創建的div
[英]Sorting javaScript created divs
問題描述
Hay我在從createElement函數排序div時遇到問題。
問題：我從在行中對齊的數據庫項創建div（末尾的最新項）
我想要的是：以相反的方向顯示項目。 添加到數據庫中的最新項目應顯示為流中的第一項（如Facebook上的新聞流）。
問題：如何更改div的加載/創建方向？
進一步，我想到了一種為創建的每個div設置一個單獨的ID的技術，以便以后按ID（ID可以是正在進行的數字）對它們進行排序。 我找到了這個，但我沒有增加ID號卻沒有用： Javascript創建具有不同ID的div
我知道在stackoverflow上有很多類似這樣的問題，我之前曾嘗試過幾次，但都沒有成功。
查看我的代碼：
//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>
感謝您的幫助:)
2 個解決方案
解決方案1
0 2017-09-05 12:13:56
1.為什么不查詢它們的后代？ :)）
2。
card.childNodes.length
? card.insertBefore(cardtitle, card.childNodes[0])
: card.appenChild(cardtitle);
解決方案2
0 已采納 2017-09-05 12:14:09
由於您使用的是jQuery而不是
document.body.appendChild(card);
采用
$('body').prepend($(card))
您可以使用要添加到其中的ID來標記該區域，這樣它就不會像
$('#elementid').prepend($(card))
使用 Javascript 和 mootools 附加到動態創建的 div
[英]Appending to dynamically created divs using Javascript and mootools
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.