javascript - 如何被选中并将其放在顶部列表中

Question

我使用无序列表创建了一个多语言页面。

我希望当访问者选择他的语言时，它成为li列表中的第一个。

<div id="lang">
    <ul id="ul">
        <li class="top" id="ar">
            <a href="index.php?lang=ar"><img src="images/languages/eg.png"/>Arabic</a>
        </li>
        <li id="en">
            <a href="index.php?lang=en"><img src="images/languages/us.png"/>English</a>
        </li>
        <li id="fr">
            <a href="index.php?lang=fr"><img src="images/languages/fr.png"/>French</a>
        </li>
        <li id="de">
            <a href="index.php?lang=ge"><img src="images/languages/de.png"/>Germany</a>
        </li>
        <li id="tu">
            <a href="index.php?lang=tu"><img src="images/languages/tr.png"/>Turkey</a>
        </li>
        <li id="cn">
            <a href="index.php?lang=tu"><img src="images/languages/cn.png"/>China</a>
        </li>
    </ul>
</div>

Answer 1

$('#lang').on('click', 'li a', function(e){
    e.preventDefault();
    $('#ul').prepend($(this).parent());
});

请参阅工作演示：http: //jsfiddle.net/codepic/MDR6w/1/

我建议您阅读相关文档：

1. jQuery .on()
2. jQuery event.preventDefault()
3. jQuery .parent()
4. jQuery .prepend()

然后还有这个性能方面。在这个特定的示例中可能没有那么相关，但在早期阶段开始研究它永远不会受到伤害。再加上很多时候，性能最好的代码是简单的代码。简单也多次翻译为“可读”。

我花了一些时间对此处提供的示例进行了一些性能测试：

• jsPerf 测试

Answer 2

就这么简单：

$('li').on('click', function() {
    $(this).parent().prepend(this);
});

请参阅此处的工作示例http://jsfiddle.net/NyxnJ/10/

Answer 3

看到这个： 样本

$('div#lang').on('click', 'li:not(:first) a', function(e){
  e.preventDefault();
  var li =  $(this).parent();
  li.siblings().removeClass("top").end().prependTo(li.parent()).addClass('top');
  return false;
});

Answer 4

尝试这个

 $('#ul li a').click(function(e){
      e.preventDefault();
      var lielement=$(this).parent('li')
      lielement.remove();
      $('#ul').prepend(lielement);

 }