Question

嗨，我有这个javascript。

<html>
    <div>
        <li class="class0 class1" data-slide-to="0">Start</li>
     </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
     var i;
         for(i=0; i<3; i++){
             $(".class1").after("<li Class='class0' data-slide-to='"+i+"'>"+i+"</li>");
         }
      </script>  
</html>

我得到了输出

Start
3
2
1
0

但我希望按照以下顺序得到这个结果

start
0
1
2
3

我是怎么做到的？如何恢复结果？

Answer 1

由于您使用的是after()方法，因此会在li之后追加。所以得到父母并附加元素。虽然您需要更新条件才能生成4元素并且您的HTML无效，但li应该是ul或ol的孩子。

<html>
<div>
  <ul>
    <li class="class0 class1" data-slide-to="0">Start</li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  var i;
  for (i = 0; i < 4; i++) {
    $(".class1").parent().append("<li Class='class0' data-slide-to='" + i + "'>" + i + "</li>");
  }
</script>

</html>

或以相反的顺序生成元素。

<html>
<div>
  <ul>
    <li class="class0 class1" data-slide-to="0">Start</li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  var i = 4;
  while (i--) {
    $(".class1").parent().append("<li Class='class0' data-slide-to='" + i + "'>" + i + "</li>");
  }
</script>

</html>

Answer 2

更改脚本以反过来工作。所以从3开始，当你在0时停止：

 <script>
     var i;
     for(i=3; i>0; i--){
         $(".class1").after("<li Class='class0' data-slide-to='"+i+"'>"+i+"</li>");
     }
  </script>

Answer 3

<html>
<div>
    <li class="class0 class1" data-slide-to="0">Start</li>
 </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
 var i;
     for(i=3; i>=3; i--){
         $(".class1").after("<li Class='class0' data-slide-to='"+i+"'>"+i+"</li>");
     }
  </script>

将循环结果更改为javascript / Jquery中的逆序

3 个答案: