クリック時に特定のリスト項目を先頭に移動させる（jQuery）

たとえば、次のリストがあるときにクリック時に特定の項目（たとえば、桃とスイカ）を一番上に並べ替え、もう一度クリックすると元に戻したい場合に使用できるjQueryコードです。

1. リンゴ
2. 배
3. 桃*
4. スイカ*
5. バナナ

jQuery：

$('.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();
}
});

• デモ

次のコードは、ロード時に 'featured' クラスを持つ項目がソートされます。

$(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));
});
});

• デモ

このコードを使用して、お知らせや特定のクラスのアイテムを常に上に表示するようにすることができます。 たとえば、 WordPress ブログでコメント中に管理者が指定した特定のコメント（特定のクラスを追加するプラグインを使用してバックエンドでクラスを追加できます）は、ページ/ローディング時に常に一番上に表示されます。

上の図の最初のコメントは、コメントの作成時期に関係なく常に一番上に表示されます。 「Featured コメントの先頭に戻る」をクリックしてチェックを外すと、元の場所に戻ります。