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

【问题标题】：Java script array sorting proplem in html and it displays the last element firsthtml中的Java脚本数组排序问题，它首先显示最后一个元素
【发布时间】：2020-10-13 18:09:28
【问题描述】：

当我尝试使用 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>

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

【问题讨论】：

首先，您需要避免多次使用“id”属性。 ID 是唯一的。你不能复制它。尝试使用类或更改您的 ID，例如“output_1”“output_2”...
Id是一个json数组
@MoatasemB.Hussien 他们说的是复制 HTML 元素的 id 属性，而不是 id 变量。克隆节点时，克隆的 ID 与原始节点相同。
所有分配给 innerHTML 的行都在更新 HTML 中的原始 DIV，而不是克隆的一部分。
我试过了，但代码仍然先显示最后一个元素，然后升序排序

标签： javascript arrays ajax sorting clone

【解决方案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>

【讨论】：