jquery - ページの読み込みごとにすべてではなくjqueryの2番目のクラスをデフォルトとして表示する方法

Question

すべてのアイテムではなく、2 番目のクラス (data-color="Blue") のアイテムのみをすべてのページにロードするにはどうすればよいですか?

JSFiddle リンク: http://jsfiddle.net/Cr2cY/

jQuery:

$(document).ready(function () {
$('#filterOptions li a').click(function () {
    // fetch the class of the clicked item
    var ourDataAttr = $(this).data('color');
    // reset the active class on all the buttons
    $('#filterOptions li').removeClass('active');
    // update the active state on our clicked button
    $(this).parent().addClass('active');
    if (ourDataAttr == 'All') {
        // show all our items
        $('#content').find('.item').show();
    } else {
        // hide all elements that don't share ourClass
        $('#content').find('.item:not([data-color="' + ourDataAttr + '"])').hide();
        // show all elements that do share ourClass
        $('#content').find('.item[data-color="' + ourDataAttr + '"]').show();
    }
    return false;
});

});

HTML

<div id="container">
<ul id="filterOptions">
    <li class="active"><a href="#" class="All" data-color="All">All</a></li>
    <li><a href="#" class="Blue" data-color="Blue">Blue</a></li>
    <li><a href="#" class="Red" data-color="Red">Red</a></li>
    <li><a href="#" class="Black" data-color="Black">Black</a></li>
    <li><a href="#" class="White" data-color="White">White</a></li>
</ul>
<div id="content">
    <ul>
        <li class="item Blue" data-color="Blue">Blue 1</li>
        <li class="item Blue" data-color="Blue">Blue 2</li>
        <li class="item Red" data-color="Red">Red 1</li>
        <li class="item Red" data-color="Red">Red 2</li>
        <li class="item Black" data-color="Black">Black 1</li>
        <li class="item Black" data-color="Black">Black 2</li>
        <li class="item White" data-color="White">White 1</li>
        <li class="item White" data-color="White">White 2</li>
    </ul>
</div>

Answer 1

のデフォルト項目に対してclick()^[jQuery]を実行する必要があります$(document).ready。

$('#filterOptions a.Blue').click();

これにより、そのアイテムのクリック イベントがトリガーされ、ユーザーがクリックしたかのように、この場合は Blue 以外のすべてのアイテムが非表示になります。ここにデモがあります。

Answer 2

これが最速の方法です：

$(".Blue").click();

http://jsfiddle.net/Cr2cY/6/