LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » HTML-CSS-PHP-JavaScript / JavaScript Codes » How To Reverse The Order Of OL List Using JavaScript?

How To Reverse The Order Of OL List Using JavaScript?

How-To-Reverse-The-Order-Of-OL-List-Using-JavaScript
HTML OL List automatically show accending nos in the start of list and will keep increasing where ever you will add an item to the list but if you want to reverse the order of string or want to make the list in decending order then you cant do it via HTML so you have to add some extra tweeks to do it.

Now there are many one available only but not features are ok to use them because you have to watch out your loading time too so think twice before using the codes on your web that can make your loading time high of bad SEO effect. But this one is light weight and have to bunch of codes. All is here you you also do not have to hit any others URLs. Now go for it and garb the code to use it.

Features:

1.) Pure JavaScript Added.
2.) No External JavaScript Or JQuery File.
3.) No CSS Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Browser.

How To Add In A WebPage?

1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

Recommended For You:
How To Capitalize Every Starting Letter Of A Word In A String JavaScript?

HTML:

<ol id="reverse_all">
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ol>

JavaScript:

<script type="text/javascript">
//<![CDATA[
/*
Related Post With Thumbnail & Summary In Grid View
Copyright (c) 2013 EXEIdeas International.
*/
var reverse=document.getElementById('reverse_all');
reverse.style.listStyle='none';
var li=reverse.getElementsByTagName('li');
for(var i=0; i<li.length; i++)
{
li[i].insertBefore(document.createTextNode(i+1+'. '), li[i].firstChild);
reverse.insertBefore(li[i], reverse.firstChild);
}
//]]>
</script>

Customization:

1.) Edit Your HTML & CSS As Per Your Requirements. Rest JavaScript Is Ok For General Us. If You Are Pro, Then You Can Do Any Thing.

Last Words:

That’s all we have. If you have any problem with this code in your blogger template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…

You Like It, Please Share This Recipe With Your Friends Using...

Be the first to write a comment.

Leave a Reply

Your email address will not be published. Required fields are marked *