AF
HomeTagSubmit NotesAsk AnythingLoginSubscribe Us
AF
1. Feel Free to ask and submit anything on Anyforum.in and get satisfactory answer
2. Registration is not compulsory, you can directly login via google or facebook
3. Our Experts are looking for yours ?.



html-jquery: How to reverse HTML list by jquery?

I have a sorted list of data on html page. I want to reverse or change the order of list by jquery. Please give me an example of how to change the order of list elements by jquery.

html x 24
jquery x 12
Posted On : 2015-12-06 11:27:14.0
profile Rishi Kumar - anyforum.in Rishi Kumar
523188245674
up-rate
5
down-rate

Answers


Yes we can reverse list elements by jquery. Just store the list elements which is child of <ul> or <ol> tag in a javascript array variable by calling children() of jquery. and then iterate the array and append the DOM element in <ul> or <ol> tag.


ReversingList.html:
------------------------------------
<html>
<head><title>Reversing list elements by Jquery- anyforum.in</title></head>
<body>
<ul id="number-list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<button id="order">Change List Order- Click Here</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(´#order´).bind(´click´, function(){
var list=$(´#number-list´).children();
$(´#number-list´).html(´´);
for(var i=list.length-1;i>=0;i--){
$(´#number-list´).append($(list[i]));
}
});
</script>
</body>
</html>


Output:
-------------------------------
  • 1
  • 2
  • 3
  • 4

Posted On : 2015-12-06 14:38:59
Satisfied : 1 Yes  0 No
profile Garima Gupta - anyforum.in Garima Gupta
596129554552
Reply This Thread
up-rate
5
down-rate



Post Answer
Please Login First to Post Answer: Login login with facebook - anyforum.in