Java html 中的脚本数组排序问题，它首先显示最后一个元素

Question

当我尝试使用 for 循环显示 idArray 元素时，它从最后一个元素开始，然后开始显示升序

我试着在控制台中显示它，它按我想要的方式显示升序

// magic.js
$(document).ready(function() {
  let token = 'AuZQZLEZRmSW3CfnJPXL';
  //var id = 308;

  var row = document.getElementById('row');
  var container = document.getElementById('container');
  var title = document.getElementById('outputtitle');
  var id = document.getElementById('outputid');
  var show = document.getElementById('show');

  $.ajax({
    url: 'https://successsroadv2.herokuapp.com/api/v1/Jobhome',
    type: "GET",
    dataType: "json",
    headers: {
      'Content-Type': 'application/json',
      "Authorization": token
    },
    success: function(data) {
      var myText = '';
      const idArray = data.map(user => user.id);
      const titleArray = data.map(user => user.title);
      //console.log(idArray);
      for (var i = 0; i < data.length; i++) {
        var myText = idArray[i];
        var myText2 = titleArray[i];
        var clone = row.cloneNode(true); //repeat html div
        container.appendChild(clone); //row repeated
        title.innerHTML = myText; //display in title div
        id.innerHTML = myText; //display in id div
        show.innerHTML = myText2; //display in show div
        console.log(myText);
      }

      //const titleArray = data.map(user => user.title);
      //console.log(titleArray);
      /*for (var i = 0; i <data.length; i++) {
          //console.log(data.title);
          myText = data[i].id;
          console.log(myText);
      }
      document.getElementById('show').innerHTML = myText;*/
      //console.log('succ'+data.title);
    },
    error: function(error) {
      console.log(`Error ${error}`);
    }
  });
});

#outputid {
  padding: 20px;
  font-size: large;
  background-color: darkgrey;
  color: black;
}

#outputtitle {
  padding: 20px;
  font-size: large;
  background-color: gray;
  color: black;
}

#show {
  padding: 20px;
  font-size: large;
  background-color: lightgray;
  color: black;
}

#container {
  background-color: darkslategray;
  padding: 60px;
}

body {
  padding: 30px;
}

#row {
  padding: 20px;
}

<!-- index.html -->

<!doctype html>
<html>

<head>
  <title>Get Try!</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
  <!-- load bootstrap via CDN -->

  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <!-- load jquery via CDN -->
  <script src="./js/script1.js"></script>
  <!-- load our javascript file -->
</head>

<body>
  <div class="container" id="container">
    <div class="row" id="row">
      <div class="col-sm-4" id="outputtitle"></div>
      <div class="col-sm-4" id="outputid"></div>
      <div class="col-sm-4" id="show"></div>
    </div>
  </div>
</body>

</html>

当我在 HTML 中使用 for 循环显示数据时，它从最后一个元素开始，将一个 div 留空并从头开始排序升序我想从代码的第一个开始显示升序如果在控制台中显示数组，则没有问题

Answer 1

将您的 HTML 更改为使用类而不是 DIV 的 ID。然后就可以在克隆的DIV中找到嵌套的元素，赋值给它们的HTML.

// magic.js
$(document).ready(function() {
  let token = 'AuZQZLEZRmSW3CfnJPXL';
  //var id = 308;

  var row = $('.row');
  var container = $('#container');

  $.ajax({
    url: 'https://successsroadv2.herokuapp.com/api/v1/Jobhome',
    type: "GET",
    dataType: "json",
    headers: {
      'Content-Type': 'application/json',
      "Authorization": token
    },
    success: function(data) {
      var myText = '';
      const idArray = data.map(user => user.id);
      const titleArray = data.map(user => user.title);
      //console.log(idArray);
      for (var i = 0; i < data.length; i++) {
        var myText = idArray[i];
        var myText2 = titleArray[i];
        var clone = row.clone(true);
        clone.find(".outputtitle").html(myText);
        clone.find(".outputid").html(myText);
        clone.find(".show").html(myText2);
        console.log(myText);
        container.append(clone);
      }
    },
    error: function(error) {
      console.log(`Error ${error}`);
    }
  });
});

.outputid {
  padding: 20px;
  font-size: large;
  background-color: darkgrey;
  color: black;
}

.outputtitle {
  padding: 20px;
  font-size: large;
  background-color: gray;
  color: black;
}

.show {
  padding: 20px;
  font-size: large;
  background-color: lightgray;
  color: black;
}

#container {
  background-color: darkslategray;
  padding: 60px;
}

body {
  padding: 30px;
}

.row {
  padding: 20px;
}

<!-- index.html -->

<!doctype html>
<html>

<head>
  <title>Get Try!</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
  <!-- load bootstrap via CDN -->

  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <!-- load jquery via CDN -->
  <script src="./js/script1.js"></script>
  <!-- load our javascript file -->
</head>

<body>
  <div class="container" id="container">
    <div class="row">
      <div class="col-sm-4 outputtitle"></div>
      <div class="col-sm-4 outputid"></div>
      <div class="col-sm-4 show"></div>
    </div>
  </div>
</body>

</html>

Java html 中的脚本数组排序问题，它首先显示最后一个元素

Java script array sorting proplem in html and it displays the last element first

javascript

arrays

sorting

ajax

clone