jQuery element manipulation 2

by horhey

HTML

<ol class="left">
    <li class="foo">foo</li>
    <li class="foo">foo</li>
    <li class="foo">foo</li>
    <li class="foo">foo</li>
    <li class="bar">bar</li>
    <li class="bar">bar</li>
    <li class="bar">bar</li>
    <li class="baz">baz</li>
    <li class="baz">baz</li>
</ol>
<ol class="right"></ol>
<p>
    <button class="foo-right">Foo to right</button>
    <button class="foo-left">Foo to left</button>
    <button class="detach-bar">Detach bar left</button>
    <button class="attach-bar">Attach bar right</button>
    <button class="destroy-baz">Destroy baz</button>
    <button class="right-clear">Clear right</button>
</p>

CSS

ol {
    border: 1px dashed #ccc;
    margin: 1em;
    width: 100px;
    float: left;
}

p {
    clear: both;
}

JavaScript

var $left = $("ol.left");
var $right = $("ol.right");
var $bars;

$('button').click(function () {

    switch ($(this).attr('class')) {

        case 'foo-right':
            $left.children('li.foo').appendTo($right);
            break;

        case 'foo-left':
            $right.children('li.foo').appendTo($left);
            break;

        case 'right-clear':
            $right.empty();
            break;

        case 'destroy-baz':
            $('ol.left, ol.right').children('li.baz').remove();
            break;

        case 'detach-bar':
            bars = $('li.bar', $left).detach();
            break;
            
        case 'attach-bar':
            $right.append(bars);
            break;
        
    }

});