Link to home
Start Free TrialLog in
Avatar of Refael
RefaelFlag for United States of America

asked on

jquery sorting name list

Hello Experts,

In Wordpress template i am using the magic fields to insert guests name.

<span>Name 1</span> <span>Name 2</span>

I am looking for a way to sort this list by alphabetical order with jQuery giving each starting letter a new div with its letter.

something like:
=================================

A
Anna
Adrian

B
Balina
Seri
ASKER CERTIFIED SOLUTION
Avatar of Jon Norman
Jon Norman
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Refael

ASKER

Hi JonNorman,

Simply genius!!!

One simple question if you can help tune it.....
I have above your script (your solution) the code above. Now the problem is that it continues in all the spans so for example the first name is B is red. How can i edit this so it applies per letter gorup e.g. A, B.. I hope you understand me :-)

$('span:odd').addClass('red');

Open in new window

$("#addToHere>div").find("span:odd").addClass("red").end().find("span:even").addClass("blue");

Open in new window

http://jsfiddle.net/JonNorman/WTFMw/1/

What this does is working on the divs that are direct children of #addToHere - $("#addToHere>div"), it finds all of the odd spans -.find("span:odd") and adds a class "red" - .addClass("red"). Then the end() reverts back to the previous objects -("#addToHere>div"), finds the even spans and adds a class "blue".

The odd ones are the second, fourth etc - this is because it is 0 based.
Avatar of Refael

ASKER

JonNorman,

You are jquery Ninja :-)
Thank you so so much for all the help and thank you for explaining how this works.