Solved

how to sort out ul, li list elements on a class using jquery

Posted on 2013-01-02
6
463 Views
Last Modified: 2013-01-04
I have the following list elements in my html
<div id="ProjectsGrid">

    
        <ul id="sort-list">
            
    <li class="all Residential"><a href="/the-work/marlin-lodge-residence-scotland.aspx">
        <img src="/media/442/marlin lodge residence Scotland  1.JPG" width="273px" height="166px">
        <div>
            <h4>
                Marlin Lodge Residence Scotland
            </h4>
        </div>
    </a>
        
    </li>
    <li class="all HealthAndFitness"><a href="/the-work/health-and-fitness-scotland.aspx">
        <img src="/media/433/Health and Fitness Scotland.JPG" width="273px" height="166px">
        <div>
            <h4>
                Health and Fitness Scotland
            </h4>
        </div>
    </a>
        
    </li>
    <li class="all Residential"><a href="/the-work/almaar-residence-london.aspx">
        <img src="/media/421/Almaar Residence London 1.JPG" width="273px" height="166px">
        <div>
            <h4>
                Almaar Residence London
            </h4>
        </div>
    </a>
        
    </li>
    <li class="all Residential"><a href="/the-work/acorn-park-care-home.aspx">
        <img src="/media/412/Acorn Park Old -2.JPG" width="273px" height="166px">
        <div>
            <h4>
                Acorn Park Care Home
            </h4>
        </div>
    </a>
        
    </li>
    <li class="all Industrial"><a href="/the-work/future-project-nursing-care-home-uk.aspx">
        <img src="/media/430/The Haining Nursing Home.jpg" width="273px" height="166px">
        <div>
            <h4>
                Future Project Nursing Care Home UK
            </h4>
        </div>
    </a>
        
    </li>
    <li class="all Residential"><a href="/the-work/myra-apartment-uk.aspx">
        <img src="/media/460/IMG00698-20100130-1712.jpg" width="273px" height="166px">
        <div>
            <h4>
                Myra Apartment UK
            </h4>
        </div>
    </a>
        
    </li>

        </ul>
    </div>

Open in new window



Each li element has classes like "all Residential", "all HealthAndFitness", "all industrial" etc if a user clicks on a href link I need to sort the li based on the class, Residential, HealthAndFitness or industrial etc u
0
Comment
Question by:mmalik15
  • 3
  • 3
6 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38738611
If the class name you want to sort is always the second one listed, you could do something like this:
<script type="text/javascript">
$(document).ready(function(){
	$("li a").bind("click", function(){
		var classNames = $(this).parent("li").attr("class").split(" ");
		switch (classNames[1]) {
			case "Residential":
			   alert("Residential");
			   break;
			case "HealthAndFitness":
			   alert("HealthAndFitness");
			   break;
			case "Industrial":
			   alert("Industrial");
		}
	});
});
</script>

Open in new window

0
 

Author Comment

by:mmalik15
ID: 38738633
thanks for the comment.

how can we possibly sort (re-arrange) this list on category (which is the second class always e.g. all the list elements with class HealthAndFitness should come first, followed by industrial and then Residential list elements, etc )
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38738796
Are you saying you want the list items to appear on the page in alphabetical order by the name of the second class instead of by the order they appear in the markup? If so, when does the re-order occur? On page load? You question says when a link is clicked, so I am confused.
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 

Author Comment

by:mmalik15
ID: 38741618
Let me explain this a bit more clearly.

 if you look at this page http://nkarchitects.fshaik.com/projects.aspx

we have project categories like Design, Print, Web and Graphic. If I put a button Sort by Category. Then the list items will rearrange themselves and the new order will be

Auctor Facilisis, Blue Sky  (both are in category Design) - Consectetur adipiscing, Lacinia nulla (both  are in category Print) -  Luctus ac sed libero in Category Web -  Abstract Art in Cateogry Graphic
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 38742431
Ok, so a button click will trigger the sort.
Here's the button:

<input id="sort" type="button" value="Sort by Category" />

Here's the jquery. It assumes that all list items will have "all" as the first class and the sorting class is the second:
$(document).ready(function(){
$("#sort").bind("click", function(){
	var sortedLi = new Array();
	$("#sort-list li").each(function(i){
		var classNames = $(this).attr("class").split(" ");
		sortedLi[i] = new Array(2);
		sortedLi[i][0] = classNames[1];
		sortedLi[i][1] = $(this).html();
	});
	sortedLi.sort();
	$("#sort-list").html("");
	var newLi;
	$(sortedLi).each(function(i){
		newLi = document.createElement("li");
		$(newLi).attr('class', 'all ' + sortedLi[i][0]);
		$(newLi).html(sortedLi[i][1]);
		$("#sort-list").append(newLi);
	});
});
});

Open in new window

0
 

Author Closing Comment

by:mmalik15
ID: 38745573
Perfect TommyBoy!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now