javascript - 選別jQueryで

Question

現在、私はs とs を内部に<ul>持つ単純な言語選択を持っています。<li><a>

すべて<li>にクラスがあります -lang-inactiveまたはlang-active. ユーザーが現在使用している言語によって異なります。

の<li>は.lang-inactiveデフォルトで非表示になっています。.hover()他のulオプションが表示されます。

簡単な例を次に示します。

しかし、ご覧のとおり、最初<li>はフランス語で、使用English中に言語バーにカーソルを合わせると、英語の上にフランス語が表示されます。

<li>かどうかに応じてを並べ替える方法はありますlang-activeかlang-inactive。非アクティブなものは、アクティブなものの下に表示されます。

私の現在のコードは次のとおりです。

var ul = $('#languages-iv');
    ul.css('position', 'absolute');
    ul.css('top', 5);
    li = ul.children('li');

    li.detach().sort(function(a,b) {
       //how do I sort
    });

    ul.append(li);
$("#languages-iv").hover(function(){
    $('.lang-inactive').slideToggle();
}, function() {
    $('.lang-inactive').stop().slideToggle();
});

Answer 1

これは、ページの読み込み時に (または言語セレクターが作成されるたびに) 実行され、アクティブな言語を最初の子にプッシュする必要があります。

$('.lang-active').prependTo('#languages-iv');

デモ：

http://jsfiddle.net/gqfPV/

Answer 2

    <ul>
        <li><a href="#" class="lang-active">English</a></li>
        <li><a href="#">French</a></li>
        <li><a href="#">German</a></li>
    </ul>

<script>
    $(document).ready(function(){
        $('ul li').live('click',function(){
            $('li a').removeClass('lang-active');
            var elem = $(this);
            $(this).remove();
            $('ul').prepend(elem);
            $(this).children('a').addClass('lang-active');
        });
    });
<script>

Answer 3

これがあなたの並べ替えです：

var listItems = myList.children('li').get();
listItems.sort(function(a,b){
  return $(a).hasClass('lang-inactive') ? -1 : $(b).hasClass('lang-inactive') ? 1 : 0;
});