Question

我有这个：

<div id="container" data-id="1000">
<div id="H1"></div>
  <div id="sub"></div>
<div id="sub"></div>
</div>

<div id="container" data-id="3000">
  <div id="H1"></div>
  <div id="sub"></div>
<div id="sub"></div>
</div>

<div id="container" data-id="2000">
  <div id="H1"></div>
  <div id="sub"></div>
<div id="sub"></div>
</div>

我真的需要按照它们的数据ID对这些容器进行排序。这些是动态创建的一堆div，需要对其进行排序。最好在将它们放入html中之前。

´´´javascript

  for (let i = 0; i < chapname.length; i++) 

      db.each("SELECT chaporder FROM Chapters WHERE (chapname='" + chapname + "') ORDER BY chaporder DESC LIMIT 1", function(err, chapo) {

        // Error reporting
        if (err) 
        {console.log('ERROR!', err)} 

        else {

        db.all("SELECT subname, chapid, subid, chaporder FROM chaptree3 WHERE (chapname='" + chapname + "') AND subid IS NOT NULL ORDER BY suborder", function(err,row)
        {   

        // Error reporting
        if (err) 
        {console.log('ERROR!', err)} 

        // No error? Then we do the stuff
        else { 
          {console.log(chapo.chaporder)};
          // first we create chaptertitle
          var chapcontainer = document.createElement("div");
          chapcontainer.setAttribute("id", "chapcontainer");
          chapcontainer.dataset.chaporder = JSON.stringify(chapo.chaporder);
          rows.appendChild(chapcontainer);

          var chaptertitle = document.createElement("div");
          chaptertitle.setAttribute("id", "chaptertitle");
          chaptertitle.setAttribute("onclick","{ alert('You are not going to believe this!') } ");
          chaptertitle.textContent = chapname;
          chapcontainer.appendChild(chaptertitle);

      // get the subchapters from the database

          // Note: above code creates a new element in the <div id="database"> located in index.html. The attributes can be used for CSS-styling purposes. It contains only the chaptername. 

          // then we create subtitlestuff
            row.forEach(function(row) {
            var subchapname = document.createElement("div");
            subchapname.setAttribute("id", "subchaptertitle");
            subchapname.dataset.chapid = JSON.stringify(row.chapid);
            subchapname.dataset.subid = JSON.stringify(row.subid);
            //subchapname.setAttribute("subid", '"+row+"');
            subchapname.setAttribute("onclick", "javascript:open_editor(this.dataset); javascript:chapid_subid(this.dataset)"); //javascript:update_editor(this.dataset)//javascript:change(); //javascript:save_updates(this.dataset);
            subchapname.textContent = row.subname;


            chapcontainer.appendChild(subchapname);

我的主要问题是，如果没有副标题，则章标题的生成速度会更快。

Answer 1

我已经找到解决问题的方法：

function sortOut() {

    // get the classname chapcontainer
    var classname = document.getElementsByClassName('container');

    // create a variable and put the classes it into an array. 
    var divs = [];

    for (var i = 0; i < classname.length; ++i) {
        divs.push(classname[i]);
    }

    // Sort the divs based on data-id. 
    divs.sort(function(a, b) {
        return +a.getAttribute("data-id") - +b.getAttribute("data-id");
    });
};

divs.sort可以解决问题。有关此功能的更多信息，请参见：

https://www.w3schools.com/jsref/jsref_sort.asp

Answer 2

Chapname是我从数据库中获取的变量。像这样：

db.each("SELECT DISTINCT chapname FROM Chapters ORDER BY chaporder", function(err,chapters) 
        { 

          if (err) 
          {console.log('ERROR!', err);}   

          else {
          // create variable
          let chapname = [];
          // push callback 'chapters' into variable 'chapname'
          chapname.push(chapters.chapname);
          // console.log(row);


> This should read like a book: Chapter 1
> - subchapter 1
> - subchapter 2
> 
> Chapter 2
> - subchapter 1
> - subchapter 2
> 
> The problem with above code is that it messes up the sort order of
> chapters. For example when there is a chapter without subchapters. It
> gets queried from the database faster than the previous chapter with
> subchapters.

如何使用javascript

2 个答案: