Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2013-01-02
6
Medium Priority
?
497 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses

609 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