troubleshooting Question

Javascript jQuery: I want to sort (via onclick) to sort an ul li.

Avatar of quest_capital
quest_capital asked on
JavaScriptAJAXjQuery
3 Comments1 Solution401 ViewsLast Modified:
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.

<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-->
ASKER CERTIFIED SOLUTION
sognoct

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 3 Comments.
Start Free Trial
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.

-Mike Kapnisakis, Warner Bros