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.

<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-->

Open in new window

sognoct

don't need jquery

<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];
}

Open in new window

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')">

Open in new window

quest_capital

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.

ASKER CERTIFIED SOLUTION

sognoct

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial