如何选择<li>并将其列入顶部列表</li>

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 Tests

Answer 2

就这么简单：

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

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

Answer 3

试试这个

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

 }

Answer 4

请参阅： Sample

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