title: javascript sort of HTML elements
body: <p>I'm trying to sort an <code>li</code> elements and get an unexpacted result
  I need to sort it three times to get it correctly,</p>
  
  <p>where have I mistaken?
  javascript</p>
  
  <pre><code>var sort_by_name = function(a, b) {
      return a.innerHTML.toLowerCase() &gt; b.innerHTML.toLowerCase();
  }
  $this = $("ol#table1");
  var list = $this.children();
  list.sort(sort_by_name);
  console.log(list);
  $this.html(list);
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;ol id="table1" style="display: block; "&gt;
     &lt;li class="menu__run"&gt;I&lt;/li&gt;
     &lt;li class="menu__run"&gt;IXX&lt;/li&gt;
     &lt;li class="menu__run"&gt;I&lt;/li&gt;
     &lt;li class="menu__run"&gt;I&lt;/li&gt;
     &lt;li class="menu__run"&gt;I&lt;/li&gt;
     &lt;li class="menu__run"&gt;I&lt;/li&gt;
     &lt;li class="menu__run"&gt;I&lt;/li&gt;
     &lt;li class="menu__run"&gt;I&lt;/li&gt; 
     &lt;li class="menu__run"&gt;IXX&lt;/li&gt;
     &lt;li class="menu__run"&gt;I&lt;/li&gt;
     &lt;li class="menu__run"&gt;I&lt;/li&gt;
     &lt;li class="menu__run"&gt;I&lt;/li&gt;
     &lt;li class="menu__run"&gt;I&lt;/li&gt;
     &lt;li class="menu__run"&gt;I&lt;/li&gt;
     &lt;li class="menu__test"&gt;st&lt;/li&gt;
     &lt;li class="menu__test"&gt;st&lt;/li&gt;
     &lt;li class="menu__test"&gt;st&lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Qww87/4/" rel="noreferrer">fiddle example</a></p>