asked on
Javascript jQuery: I want to sort (via onclick) to sort an ul li.
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-->
jQueryJavaScriptAJAX
Last Comment
sognoct
ASKER
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.
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
Open in new window
example :
Open in new window