Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 378
  • Last Modified:

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

0
quest_capital
Asked:
quest_capital
  • 2
1 Solution
 
sognoctCommented:
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

0
 
quest_capitalAuthor Commented:
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.
0
 
sognoctCommented:
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.

vals.sort(sortfunction)

function sortfunction(a, b){
//Compare innert html of "a" and "b" and then return -1, 0, or 1
}

Open in new window


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

Open in new window

0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now