默认使用jQuery排序列表

Question

I leveraged the jQuery code at http://jsfiddle.net/daveSalomon/bcbxftr6/1/ and created the following code:

HTML:

<div class="featuredcomments left"><span class="featuredon">[Unchecked icon] To Top</span><span class="featuredoff">[Checked icon] Original</span></div>
<ol>
  <li>Coffee</li>
  <li>Juice</li>
  <li class="featured">Tea</li>
  <li class="featured">Milk</li>
  <li>Apple</li>
</ol>

jQuery:

$(document).ready(function () {
        $('.featuredon').show();
        $('.featuredoff').hide();

$('.featuredcomments').click(function(){
    var $ul = $(this).next('ol');
    if(!$ul.data('sorted')){
        $ul.data('original', $ul.html());
        $ul.data('sorted', true);
        $ul.prepend($ul.find('li.featured'));
        $('.featuredon').hide();
        $('.featuredoff').show();

    } else {
        $ul.data('sorted', false);
        $ul.html($ul.data('original'));
            $('.featuredon').show();
        $('.featuredoff').hide();

    }
});
});

Demo

By default, the page shows the original list, but I want to make the sorted list (that is, the list with the "featured" items on top.) I tried to make further changes to make it done, but I couldn't.

How can this be modified to show the "sorted" list by default?

Thank you very much.

Answer 1

Place the code of click event in a new funtion sort and call it with show() and hide() :

$(document).ready(function () {
    sort = function(_this){
        var $ul = $(_this).next('ol');
        if(!$ul.data('sorted')){
            $ul.data('original', $ul.html());
            $ul.data('sorted', true);
            $ul.prepend($ul.find('li.featured'));
            $('.featuredon').hide();
            $('.featuredoff').show();

        } else {
            $ul.data('sorted', false);
            $ul.html($ul.data('original'));
                $('.featuredon').show();
            $('.featuredoff').hide();            
        }
    }

    $('.featuredon').show();
    $('.featuredoff').hide();
    sort($('.featuredcomments'));

    $('.featuredcomments').click(function(){
        sort($(this));
    });
});

Find your Fiddle Updated Here .

Answer 2

Answer is identical to same question you asked here using change event...trigger the event once the handler is created

$('.featuredcomments').click(function(){
    // your event handling code
    ...

  /* now trigger the event */
}).click();

DEMO