jquery changing list order based on class selected

I have a set of tabs, the select list is stacked vertically, the selected item has class "selected".

I need that item to be the last item in the list so it can also act as the header for the tab.

so it appears something like this;

<ul class= 'tabSelect'>
 <li>item 1</li>
 <li>item 3</li>
 <li>item 4</li>
 <li class="selected">item 2</li>
</ul>
<div id="tab1" style="display:none">
<div id="tab2">
 item 2 content....
</div>

etc

how do I do this in jquery

the page is www.businessexcellencebristol.co.uk/category/members

oh, and thank you!

Answers

If you need to re-arrange the items, you would simple remove the item from the list then append it back to the list.

var $selected = $('.selected');
var $parent = $selected.parent();
$selected.remove();
$selected.appendTo($parent);

This is actualy very easy in jQuery. The code would look something like this:

$('#move').click(function() {
    $('.tabSelect .selected').appendTo('.tabSelect');
});

The code is placed inside a click handler to make it easy to trigger it, but you could also do that on load or whatever event you desire. You can see the code in action here: http://jsfiddle.net/qK9XL/

When you append an item to its parent, this will in fact move it to the bottom of the list of children. Prepend would do the same, but move it to the top. Note that this anly works when appending an item to its parent. If you would be appending it to a different elemnt, it would be copied there and added as the last child, rather then moving it.

I would do it like this:

Style

<style type="text/css">
    .tabContent { display: none }
</style> 

Rearrange the html so it displays something like

<ul class='tabSelect'>
    <li id='title-1'>item 1</li>
    <li id='title-2' class="selected">item 2</li>
    <li id='title-3'>item 3</li>
    <li id='title-4'>item 4</li>
</ul>
<div id="tab-1" class="tabContent">
    Item 1 content
</div>
<div id="tab-2" class="tabContent">
    Item 2 content
</div>

And the Javascript

$(document).ready( function() { // Or maybe within a select change $('#contentSelect').change();
    showSelected();
});


function showSelected() {
    // Puts the title li last
    var $ul = $('ul .selected');
    $('ul').append($ul);
    // Makes the corresponding content visible
    $('.tabContent).hide();
    $('#tab-' + $ul.prop('id').split('-')[1].show();
}

Need Your Help