ania_piszko ania_piszko - 1 year ago 44
jQuery Question

For loop vs jquery-after

My aim is to make an ascending number list between two green squares. Right now I have a descending list (I presume because of jquery-after) --> how to make it ascending?

My jsFiddle: https://jsfiddle.net/h85conn6/

var ile = $("div.pagination").find('div').length;

$("div.pagination div").hide();
$("div.pagination div").first().show();


for(i=0; i<ile;i++){
$("ul.pagination .green:nth-child(1)").after("<li class='item'><a href='#"+i+"'>"+i+"</a></li>");
}

Answer Source

Here you go with a solution https://jsfiddle.net/h85conn6/1/

var ile = $("div.pagination").find('div').length;
$("div.pagination div").hide();
$("div.pagination div").first().show();

var item = "";
for(i=0; i<ile;i++){
   item += "<li class='item'><a href='#"+i+"'>"+i+"</a></li>";
}

$("ul.pagination .green:nth-child(1)").after(item);
body{
   padding-top:80px;
}

.green {
   width:100px;
   height:100px;
   background: green;
   border:1px solid black;
   margin:2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pagination">
   <div>	
	PG 1 
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ex tortor, vulputate at lectus nec, dapibus ultricies sem. Phasellus in suscipit arcu. Maecenas dictum lorem magna, eget interdum augue convallis vel. Morbi id dui semper, euismod enim at, scelerisque sem. Aenean varius nunc non ante scelerisque tempor. Suspendisse a ipsum vel sem sollicitudin rutrum a nec massa. Pellentesque accumsan tincidunt erat, eget faucibus metus maximus at. Duis volutpat volutpat tortor et mollis. Fusce libero lorem, ullamcorper eget sollicitudin vehicula, dignissim sed sem. Nunc sollicitudin venenatis justo non mollis. Etiam placerat sed metus non vestibulum.</div>

<div>PG 2 
	Suspendisse et mi non elit posuere scelerisque et ac ipsum. Aliquam maximus eros laoreet porta cursus. Integer at ornare justo. Nulla purus nibh, bibendum sit amet sapien eu, blandit euismod arcu. Nulla tincidunt interdum eros vel viverra. Donec rhoncus sed ligula ac fringilla. Praesent eros massa, vestibulum eget egestas at, scelerisque ut velit. Suspendisse a est vel felis facilisis molestie sit amet eu metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vel justo vitae eros hendrerit elementum sed id erat. Phasellus lacinia nisi in fermentum laoreet. Morbi vestibulum sem vitae justo imperdiet, eget cursus felis rutrum. Proin facilisis urna at ipsum varius feugiat. Sed interdum tristique turpis sed facilisis. Mauris lacus diam, vehicula eget pharetra at, laoreet quis dolor.</div>
<div>PG 2 
	Suspendisse et mi non elit posuere scelerisque et ac ipsum. Aliquam maximus eros laoreet porta cursus. Integer at ornare justo. Nulla purus nibh, bibendum sit amet sapien eu, blandit euismod arcu. Nulla tincidunt interdum eros vel viverra. Donec rhoncus sed ligula ac fringilla. Praesent eros massa, vestibulum eget egestas at, scelerisque ut velit. Suspendisse a est vel felis facilisis molestie sit amet eu metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vel justo vitae eros hendrerit elementum sed id erat. Phasellus lacinia nisi in fermentum laoreet. Morbi vestibulum sem vitae justo imperdiet, eget cursus felis rutrum. Proin facilisis urna at ipsum varius feugiat. Sed interdum tristique turpis sed facilisis. Mauris lacus diam, vehicula eget pharetra at, laoreet quis dolor.</div>
  <div>PG 2 
	Suspendisse et mi non elit posuere scelerisque et ac ipsum. Aliquam maximus eros laoreet porta cursus. Integer at ornare justo. Nulla purus nibh, bibendum sit amet sapien eu, blandit euismod arcu. Nulla tincidunt interdum eros vel viverra. Donec rhoncus sed ligula ac fringilla. Praesent eros massa, vestibulum eget egestas at, scelerisque ut velit. Suspendisse a est vel felis facilisis molestie sit amet eu metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vel justo vitae eros hendrerit elementum sed id erat. Phasellus lacinia nisi in fermentum laoreet. Morbi vestibulum sem vitae justo imperdiet, eget cursus felis rutrum. Proin facilisis urna at ipsum varius feugiat. Sed interdum tristique turpis sed facilisis. Mauris lacus diam, vehicula eget pharetra at, laoreet quis dolor.</div>
</div>

<ul class="pagination">

<div class="green"></div>
<div class="green"></div>
</ul>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download