Question

Hay我在从createElement函数中排序div时遇到问题。

问题： 我从数据库项创建div，这些数据项在行中对齐（最后一项）

我想要的是什么： 以反方向显示项目。添加到数据库中的最新项目应显示为流中的第一项（如facebook上的新闻流）。

问题： 如何更改div的加载/创建方向？

此外，我想到了一种技术，可以为每个创建的div设置个人ID，以便稍后按ID排序（Id可以是正在进行的数字）。我找到了这个，但它不起作用，而我没有增加ID号：Javascript create divs with different ids

我知道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>

感谢您的帮助：）

Answer 1

1.为什么不从db中查询它们的后代？：））

2

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

Answer 2

因为你使用的是jquery而不是

document.body.appendChild(card);

使用

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

您可以使用要添加它们的ID标记该区域，以便它不会插入到文档的顶部，如

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

对javaScript创建的div进行排序

2 个答案: