title: how to sort by image src name for all LI under a UL?
body: <p>I got a UL like this:</p>
  
  <pre><code>&lt;ul id='mylist'&gt;
  &lt;li id='1'&gt;&lt;img src='kids.jpg'&gt;kids.jpg&lt;/li&gt;
  &lt;li id='2'&gt;&lt;img src='apple.jpg'&gt;apple.jpg&lt;/li&gt;
  &lt;li id='3'&gt;&lt;img src='toys.jpg'&gt;toys.jpg&lt;/li&gt;
  &lt;li id='4'&gt;&lt;img src='love.jpg'&gt;love.jpg&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want to sort it using jquery/javascript like this:</p>
  
  <pre><code>&lt;ul id='mylist'&gt;
  &lt;li id='2'&gt;&lt;img src='apple.jpg'&gt;apple.jpg&lt;/li&gt;
  &lt;li id='1'&gt;&lt;img src='kids.jpg'&gt;kids.jpg&lt;/li&gt;
  &lt;li id='4'&gt;&lt;img src='love.jpg'&gt;love.jpg&lt;/li&gt;
  &lt;li id='3'&gt;&lt;img src='toys.jpg'&gt;toys.jpg&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>May I know how do I write the code?</p>