I'd select the spans bearing the same class as the clicked element, pick
their parent lis and put them back in order.
To select elements bearing the s1 class in an the aptly named "list" :
$('#list .s1')
To pick an element's closest li :
element.closest('li')
To remove an element from its current location :
element.remove()
Removing the element returns the nodes all the same so you can append it
somewhere else using :
element.appendTo(somewhere())
I guess you know how to sort an array :
array.sort()
And jQuery being very similar to construction games, it's funnier when you
do the assembling yourself once you've got all the parts and a plan.
Michel Belleville
2009/11/21 javam.org <alt...@gmail.com>
> Hi there,
>
> My xhtml structure looks like:
>
> <div id="aaa">
> <div class="menu">
> <span class="s1">Name</span>
> <span class="s2">Remaining Time</span>
> <span class="s3">Status</span>
> </div>
> <div class="values">
> <ul id ="list">
> <li>
> <span class="s1">Name value 1</span>
> <span class="s2">Time value 1</span>
> <span class="s3">Status value 1</span>
> </li>
> <li>
> <span class="s1">Name value 1</span>
> <span class="s2">Time value 2</span>
> <span class="s3">Status value 3</span>
> </li>
> <li>
> <span class="s1">Name value 3</span>
> <span class="s2">Time value 3</span>
> <span class="s3">Status value 3</span>
> </li>
> </ul>
> </div>
> </div>
>
>
> I am trying to sort span values for Name, Time and Status..
> I can implement to just only one menu item by adding <div ="1">, <div
> ="2"> ... which covers li elments. But it cannot provide my needs. I
> have to implement it to all.
>
> When I click time menu element (let assume "Time value 2" is greater
> than "Time value 3" and "Time value 3" is greater than "Time value
> 1"), all s2 spans should be at the top of the list... looks like:
>
> <div id="aaa">
> <div class="menu">
> <span class="s1">Name</span>
> <span class="s2">Remaining Time</span>
> <span class="s3">Status</span>
> </div>
> <div class="values">
> <ul id ="list">
> <li>
> <span class="s2">Name value 1</span>
> <span class="s3">Time value 1</span>
> <span class="s1">Status value 1</span>
> </li>
> <li>
> <span class="s2">Name value 1</span>
> <span class="s3">Time value 2</span>
> <span class="s1">Status value 3</span>
> </li>
> <li>
> <span class="s2">Name value 3</span>
> <span class="s3">Time value 3</span>
> <span class="s1">Status value 3</span>
> </li>
> </ul>
> </div>
> </div>
>
> And should be available for other menu elements also...
>
> Could you show me the ways to do it?
>
> Best Regards.
>
