Question

我正在使用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} ...预先感谢！

Answer 1

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

更改行

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

到

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

，您应该看到预期的输出。希望对您有帮助！

Answer 2

将prepend更改为append

<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").append("<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>

注意： .prepend()方法将指定的内容作为jQuery集合中每个元素的第一个子元素插入（要将其作为 last 子元素插入，请使用.append()）。

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

2 个答案: