时间戳

首页 > 解决方案 > 如何按特定顺序将元素添加到列表中？

jquery - 如何按特定顺序将元素添加到列表中？

问题描述

我正在使用 JQuery 将元素添加到列表中，它正在工作，但元素是向后的（因为没有更好的术语），我需要知道如何让它们保持有序，而不是 = {5,4 ,3,2,1} 应该是 = {1,2,3,4,5}。

我不知道具体怎么做，但我希望你们能帮助我。

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
  var counter = 0
  $(document).ready(function() {
    $("#BtnRev").click(function() {
      $("#div1").remove();
    });
    $("#BtnAdd").click(function() {
      counter = counter + 1;
      $("#div2").prepend("<li>", StepTitle.value, Description.value, "  </li>", "Counter>>>", counter, "</br>");
    });
  });
</script>

<br/>
<button type="button" ID="BtnAdd" class="btn btn-basic">Add</button>
<button type="button" ID="BtnAdd2" class="btn btn-warning">Button</button>
<button type="button" ID="BtnRev" class="btn btn-danger">Remove last step (Not yet)</button>
<hr/>
<label for="StepTitle">Title: </label>
<input type="text" id="StepTitle" class="form-control" placeholder="Title..." />
<label for="Description">Description: </label>
<textarea rows="5" id="Description" class="form-control"></textarea>
<hr />
<script src="Test2.js"></script>
<div id="div1">
  <p>This is meant to be deleted</p>
</div>
<div class="well">
  <h4>Things go here!</h4>
  <ol id="div2">
    <!---->
  </ol>
</div>

正如我之前解释的那样，我得到的输出是 {5,4,3,2,1} 并且应该是 {1,2,3,4,5} ...提前致谢！

标签： jqueryhtml

解决方案

当您应该附加到列表时，您正在尝试将值添加到列表中。Append 会将术语添加到列表的末尾以保持您想要的顺序。

换行

 $("#div2").prepend("<li>", StepTitle.value, Description.value, "  </li>", "Counter>>>", counter , "</br>");

至

 $("#div2").append("<li>", StepTitle.value, Description.value, "  </li>", "Counter>>>", counter , "</br>");

你应该看到预期的输出。希望能帮助到你！

推荐阅读