Change for loop result to reverse order in javascript/Jquery

Question

Hi i have this 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>

And i get the out put as

Start
3
2
1
0

But i want to get this result in following order

start
0
1
2
3

how i get this ?How to revert the result?

Select last element of .class0 using$(".class0:last").append('target html') — Mohammad
– Mohammad, Commented Jan 6, 2017 at 8:32
to answer the question as specified "change for loop" ... for(i=3; i>=0; i--){ — Jaromanda X
– Jaromanda X, Commented Jan 6, 2017 at 8:32
the use of the word "output" suggests you were talking about the "output" - nevermind, deleted my miscorrection — Jaromanda X
– Jaromanda X, Commented Jan 6, 2017 at 8:36

Pranav C Balan · Accepted Answer · 2017-01-06 08:58:31Z

2

Since you are using after() method it would append after the li. So get the parent and append the element. Although you need to update the condition in order to generate 4 elements and your HTML is not valid the li should be the child of ul or 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>

Or geneate elements in reverse order.

<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>

edited Jan 6, 2017 at 8:58

answered Jan 6, 2017 at 8:31

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jaromanda X Over a year ago

<= 3 to get required output :p (or < 4 as you say :p )

John Over a year ago

could you please explain more about parent() .

Pranav C Balan Over a year ago

@John : the parent() method would get the parent of the element... in my snippet it would select ul..... and append() method add content at the end of ul...

VinKel · Accepted Answer · 2017-01-06 08:33:06Z

2

Change your script to work the other way around. So start at 3, and stop when you're at 0:

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

answered Jan 6, 2017 at 8:33

VinKel

1467 bronze badges

Comments

Mitesh Pant · Accepted Answer · 2017-01-06 08:50:54Z

0

<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>

answered Jan 6, 2017 at 8:50

Mitesh Pant

5422 silver badges15 bronze badges

Collectives™ on Stack Overflow

Change for loop result to reverse order in javascript/Jquery

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related