?
Solved

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

Posted on 2013-01-02
6
Medium Priority
?
492 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…
Suggested Courses

765 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