how get Selected <li> and put it in the top list

JavaScript performance comparison

Test case created

Info

Related discussion: http://stackoverflow.com/questions/15379335/how-get-selected-li-and-put-it-in-the-top-list/15379460

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<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>
<script>
Benchmark.prototype.setup = function() {
    $('#lang').html('<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>');
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Jani Hyytiäinen
$('#lang').on('click', 'li a', function(e) {
  e.preventDefault();
  $('#ul').prepend($(this).parent());
});
$('a').each(function() {
  $(this).trigger('click');
});
pending…
A.V
$('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;
});
$('a').each(function() {
  $(this).trigger('click');
});
pending…
Raman
$('li').on('click', function() {
  $(this).parent().prepend(this);
});
$('a').each(function() {
  $(this).trigger('click');
});
pending…
bipen
$('#ul li a').click(function(e) {
  e.preventDefault();
  var lielement = $(this).parent('li')
  lielement.remove();
  $('#ul').prepend(lielement);
});
$('a').each(function() {
  $(this).trigger('click');
});
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment