javascript - 种类用 jQuery

Question

目前我有一个语言选择，它很简单，里面<ul>有<li>s 和<a>s 。

每个<li>人都有一个班级 -lang-inactive或lang-active。这取决于用户现在使用的语言。

默认情况下隐藏s <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;
});