jQuery element manipulation

by vijayram_a

HTML

<ol>
    <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>
<button class="foo" action="bold">Foo bold</button>
<button class="foo" action="red">Foo red</button>
<button class="bar" action="toggle">Bar toggle</button>
<button class="baz" action="length">Baz length</button>

JavaScript

var $list = $("ol");

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

    var $this = $(this);
    var cls = $this.attr('class');
    var $items = $list.children('.' + cls);

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

        case 'bold':
            $items.css('font-weight', 'bold');
            break;

        case 'red':
            $items.css({ 
                color: 'red' 
            });
            break;

        case 'toggle':
            $items.toggle();
            break;
            
        case 'length':
            console.log($items.length);
            break;

    }

});