troubleshooting Question
Javascript jQuery: I want to sort (via onclick) to sort an ul li.
quest_capital asked on
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-->
Learn from the best
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.
Our community of experts have been thoroughly vetted for their expertise and industry experience.