Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users
Course Of The Month
7 days, 16 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Javascript jQuery: I want to sort (via onclick) to sort an ul li.
Posted on 2013-01-07
I want to sort my <ul id="vlist"> li (via onclick)
For example if Unit is selected from the ddmenu ID order the ul vlist ID li list based on that span class.
For example if Unit is selected from the ddmenu ID order the ul vlist ID li list based on that span class.
<div class="widgetbox">
<div class="title"><h3> Fleet Vehicles</h3></div>
<div class="widgetoptions" style="height:33px; font-weight:bold">
<div style=" float:left; display:inline-block;">
<ul id="ddmenu" class="photosharing_menu">
<li class="marginleft5 dropdown" id="actions">
<a class="dropdown_label" style=" padding-right:30px" href="#actions">
Sort By
<span class="arrow"></span>
</a>
<ul style="background-color:Aqua; z-index:200">
<li style="background-color:Aqua; z-index:200"><a href="">Name</a></li>
<li><a href="">Unit</a></li>
<li><a href="">Type</a></li>
<li><a href="">Status</a></li>
<li><a href="">Location</a></li>
<li><a href="">Alerts</a></li>
</ul>
</li>
</ul>
</div>
<div style=" float:right; display:inline-block; width:50%; text-align:right"><a href="">Add a Vehicle</a></div>
</div>
<div class="widgetcontent userlistwidget userlistwidget_o nopadding">
<div id="scroll1" class="mousescroll">
<ul id="vlist">
<li>
<div class="avatar"><img src="images/thumbs/car1.jpg" alt="" /></div>
<div class="info" style="padding: 2px 0px;">
<span class="name"><a href="">Supply Truck #1 (Ford F150)</a></span><br />
<span class="location">Atlantic City Golden Nugget</span><br />
<div style="float:left;">
<span class="status tags color-gray" >Out Of Service</span> <span class="unit">Unit # T1202310004</span>
</div>
<div style="float:right; display:inline-block; visibility:block"><a class="alert color-red" href="#">
<span class="alerts">12</span></a>
</div>
<br />
</div><!--info-->
</li>
<li>
<div class="avatar"><img src="images/thumbs/car2.jpg" alt="" /></div>
<div class="info" style="padding: 2px 0px;">
<span class="name"><a href="">The Boss</a></span><br />
<span class="location">Atlantic City Golden Nugget</span><br />
<div style="float:left;">
<span class="status tags color-blue">In Service</span> <span class="unit">Unit # C1202310005</span>
</div>
<div style="float:right; display:inline-block; visibility:hidden"><a class="alert color-red" href="#">
<span class="alerts"></span></a>
</div>
<br />
</div>
</li>
<li>
<div class="avatar"><img src="images/thumbs/car3.jpg" alt="" /></div>
<div class="info" style="padding: 2px 0px;">
<span class="name"><a href="">Captain Gutt</a></span><br />
<span class="location">Atlantic City Golden Nugget</span><br />
<div style="float:left;">
<span class="status tags color-orange">Checked Out</span> <span class="unit">Unit # C1202310006</span>
</div>
<div style="float:right; display:inline-block; visibility:hidden"><a class="alert color-red" href="#">
<span class="alerts"></span></a>
</div>
<br />
</div>
</li>
<li>
<div class="avatar"><img src="images/thumbs/car4.jpg" alt="" /></div>
<div class="info" style="padding: 2px 0px;">
<span class="name"><a href="">Flynn</a></span><br />
<span class="location">Atlantic City Golden Nugget</span><br />
<div style="float:left;">
<span class="status tags color-black">Sold</span> <span class="unit">Unit # B1202310001</span>
</div>
<div style="float:right; display:inline-block; visibility:hidden"><a class="alert color-red" href="#">
<span class="alerts"></span></a>
</div>
<br />
</div>
</li>
<li>
<div class="avatar"><img src="images/thumbs/car5.jpg" alt="" /></div>
<div class="info" style="padding: 2px 0px;">
<span class="name"><a href="">Passenger Pickup #1</a></span><br />
<span class="location">Atlantic City Golden Nugget</span><br />
<div style="float:left;">
<span class="status tags color-blue">In Service</span> <span class="unit">Unit # T1202310005</span>
</div>
<div style="float:right; display:inline-block; visibility:hidden"><a class="alert color-red" href="#">
<span class="alerts"></span></a>
</div>
<br />
</div>
</li>
<li>
<div class="avatar"><img src="images/thumbs/car5.jpg" alt="" /></div>
<div class="info" style="padding: 2px 0px;">
<span class="name"><a href="">Passenger Pickup #2</a></span><br />
<span class="location">Atlantic City Golden Nugget</span><br />
<div style="float:left;">
<span class="tags color-blue">In Service</span> <span class="unit">Unit # T1202310006</span>
</div>
<div style="float:right; display:inline-block; visibility:block"><a class="alert color-red" href="#">
<span class="alerts">3</span></a>
</div>
<br />
</div>
</li>
<li>
<div class="avatar"><img src="images/thumbs/car5.jpg" alt="" /></div>
<div class="info" style="padding: 2px 0px;">
<span class="name"><a href="">Passenger Pickup #3</a></span><br />
<span class="location">Atlantic City Golden Nugget</span><br />
<div style="float:left;">
<span class="tags color-blue">In Service</span> <span class="unit">Unit # T1202310007</span>
</div>
<div style="float:right; display:inline-block; visibility:hidden"><a class="alert color-red" href="#">
<span class="alerts"></span></a>
</div>
<br />
</div>
</li>
</ul>
</div>
</div><!--widgetcontent-->
</div><!--widgetbox-->
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
2
3 Comments
don't need jquery
example :
<script>
function sortUnorderedList(ul, sortDescending) {
if(typeof ul == "string")
ul = document.getElementById(ul);
// Idiot-proof, remove if you want
if(!ul) {
alert("The UL object is null!");
return;
}
// Get the list items and setup an array for sorting
var lis = ul.getElementsByTagName("LI");
var vals = [];
// Populate the array
for(var i = 0, l = lis.length; i < l; i++)
vals.push(lis[i].innerHTML);
// Sort it
vals.sort();
// Sometimes you gotta DESC
if(sortDescending)
vals.reverse();
// Change the list on the page
for(var i = 0, l = lis.length; i < l; i++)
lis[i].innerHTML = vals[i];
}
example :
<ul id="listid">
<li>two</li>
<li>one</li>
<li>bee</li>
<li>test</li>
<li>zeta</li>
<li>five</li>
</ul>
<input type="Button" Text="sort" onClick="javascript:sortUnorderedList('listid')">
sognoct
Thx for your responce.
However I have seen the example before.
Can you modify that exp to where you click on a link to sort based on a <span id> thats within the <li> tag.
Thx for your responce.
However I have seen the example before.
Can you modify that exp to where you click on a link to sort based on a <span id> thats within the <li> tag.
the script works but the sorting criteria is the inner html itself (in this case the sorting order users the thumbs name, because thumbs are the first part of string inside <li> tag).
To choose a different criteria you shoud change code on vals.sort() including a control function.
The easiest way is to call thumbs with the same name of the <a href=""> title </a> so you don't have to create a sortfunction but just to assign images the same name of the article
(in this example you sort descending the vlist accoring to thumb name)
To choose a different criteria you shoud change code on vals.sort() including a control function.
vals.sort(sortfunction)
function sortfunction(a, b){
//Compare innert html of "a" and "b" and then return -1, 0, or 1
}
The easiest way is to call thumbs with the same name of the <a href=""> title </a> so you don't have to create a sortfunction but just to assign images the same name of the article
(in this example you sort descending the vlist accoring to thumb name)
<script>
function sortUnorderedList(ul, sortDescending) {
if(typeof ul == "string")
ul = document.getElementById(ul);
// Idiot-proof, remove if you want
if(!ul) {
alert("The UL object is null!");
return;
}
// Get the list items and setup an array for sorting
var lis = ul.getElementsByTagName("LI");
var vals = [];
// Populate the array
for(var i = 0, l = lis.length; i < l; i++)
vals.push(lis[i].innerHTML);
// Sort it
vals.sort();
// Sometimes you gotta DESC
if(sortDescending)
vals.reverse();
// Change the list on the page
for(var i = 0, l = lis.length; i < l; i++)
lis[i].innerHTML = vals[i];
}
</script>
<div class="widgetbox">
<div class="title"><h3> Fleet Vehicles</h3></div>
<div class="widgetoptions" style="height:33px; font-weight:bold">
<div style=" float:left; display:inline-block;">
<ul id="ddmenu" class="photosharing_menu">
<li class="marginleft5 dropdown" id="actions">
<a class="dropdown_label" style=" padding-right:30px" href="javascript:sortUnorderedList('vlist', 1)">
Sort By
<span class="arrow"></span>
</a>
<ul style="background-color:Aqua; z-index:200">
<li style="background-color:Aqua; z-index:200"><a href="">Name</a></li>
<li><a href="">Unit</a></li>
<li><a href="">Type</a></li>
<li><a href="">Status</a></li>
<li><a href="">Location</a></li>
<li><a href="">Alerts</a></li>
</ul>
</li>
</ul>
</div>
<div style=" float:right; display:inline-block; width:50%; text-align:right"><a href="">Add a Vehicle</a></div>
</div>
<div class="widgetcontent userlistwidget userlistwidget_o nopadding">
<div id="scroll1" class="mousescroll">
<ul id="vlist">
<li>
<div class="avatar"><img src="images/thumbs/car1.jpg" alt="" /></div>
<div class="info" style="padding: 2px 0px;">
<span class="name"><a href="">Supply Truck #1 (Ford F150)</a></span><br />
<span class="location">Atlantic City Golden Nugget</span><br />
<div style="float:left;">
<span class="status tags color-gray" >Out Of Service</span> <span class="unit">Unit # T1202310004</span>
</div>
<div style="float:right; display:inline-block; visibility:block"><a class="alert color-red" href="#">
<span class="alerts">12</span></a>
</div>
<br />
</div><!--info-->
</li>
<li>
<div class="avatar"><img src="images/thumbs/car2.jpg" alt="" /></div>
<div class="info" style="padding: 2px 0px;">
<span class="name"><a href="">The Boss</a></span><br />
<span class="location">Atlantic City Golden Nugget</span><br />
<div style="float:left;">
<span class="status tags color-blue">In Service</span> <span class="unit">Unit # C1202310005</span>
</div>
<div style="float:right; display:inline-block; visibility:hidden"><a class="alert color-red" href="#">
<span class="alerts"></span></a>
</div>
<br />
</div>
</li>
<li>
<div class="avatar"><img src="images/thumbs/car3.jpg" alt="" /></div>
<div class="info" style="padding: 2px 0px;">
<span class="name"><a href="">Captain Gutt</a></span><br />
<span class="location">Atlantic City Golden Nugget</span><br />
<div style="float:left;">
<span class="status tags color-orange">Checked Out</span> <span class="unit">Unit # C1202310006</span>
</div>
<div style="float:right; display:inline-block; visibility:hidden"><a class="alert color-red" href="#">
<span class="alerts"></span></a>
</div>
<br />
</div>
</li>
<li>
<div class="avatar"><img src="images/thumbs/car4.jpg" alt="" /></div>
<div class="info" style="padding: 2px 0px;">
<span class="name"><a href="">Flynn</a></span><br />
<span class="location">Atlantic City Golden Nugget</span><br />
<div style="float:left;">
<span class="status tags color-black">Sold</span> <span class="unit">Unit # B1202310001</span>
</div>
<div style="float:right; display:inline-block; visibility:hidden"><a class="alert color-red" href="#">
<span class="alerts"></span></a>
</div>
<br />
</div>
</li>
<li>
<div class="avatar"><img src="images/thumbs/car5.jpg" alt="" /></div>
<div class="info" style="padding: 2px 0px;">
<span class="name"><a href="">Passenger Pickup #1</a></span><br />
<span class="location">Atlantic City Golden Nugget</span><br />
<div style="float:left;">
<span class="status tags color-blue">In Service</span> <span class="unit">Unit # T1202310005</span>
</div>
<div style="float:right; display:inline-block; visibility:hidden"><a class="alert color-red" href="#">
<span class="alerts"></span></a>
</div>
<br />
</div>
</li>
<li>
<div class="avatar"><img src="images/thumbs/car5.jpg" alt="" /></div>
<div class="info" style="padding: 2px 0px;">
<span class="name"><a href="">Passenger Pickup #2</a></span><br />
<span class="location">Atlantic City Golden Nugget</span><br />
<div style="float:left;">
<span class="tags color-blue">In Service</span> <span class="unit">Unit # T1202310006</span>
</div>
<div style="float:right; display:inline-block; visibility:block"><a class="alert color-red" href="#">
<span class="alerts">3</span></a>
</div>
<br />
</div>
</li>
<li>
<div class="avatar"><img src="images/thumbs/car5.jpg" alt="" /></div>
<div class="info" style="padding: 2px 0px;">
<span class="name"><a href="">Passenger Pickup #3</a></span><br />
<span class="location">Atlantic City Golden Nugget</span><br />
<div style="float:left;">
<span class="tags color-blue">In Service</span> <span class="unit">Unit # T1202310007</span>
</div>
<div style="float:right; display:inline-block; visibility:hidden"><a class="alert color-red" href="#">
<span class="alerts"></span></a>
</div>
<br />
</div>
</li>
</ul>
</div>
</div><!--widgetcontent-->
</div><!--widgetbox-->
Featured Post
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation.
Delegation allows a single script that is added at page creation to mat…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page.
Reference your jQuery libraries: (CODE)
Include your new external js/jQuery file: (CODE)
Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles.
Reference your jQuery libraries:
(CODE)
Include your new external js/jQuery file:
(CODE)
Write your first lines of code to setup your site for jQuery…
Suggested Courses
Earn Certification
HTML5 Specialist - Certification
Free withPremium
Course of the Month7 days, 16 hours left to enroll
Earn Certification
Certified Web Development Professional
$335.99
617 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.