Link to home
Avatar of mmalik15
mmalik15

asked on

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

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
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

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

Avatar of mmalik15
mmalik15

ASKER

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 )
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.
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
ASKER CERTIFIED SOLUTION
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Perfect TommyBoy!