jQuery Order a ul list

Order!

HTML

<div id="grid">
  <div id="2" class="col-1-2">
    <h1>Ordered via jQuery:</h1>
    <ul id="1" class="ordered">
        <li>Orange</li>
        <li>Pear</li>
        <li>Bananna</li>
        <li>Apple</li>
        <li>Cucumber</li>
    </ul>
  </div>
  <div class="col-2-2">
    <h1>Original Static Order:</h1>
    <ul>
        <li>Orange</li>
        <li>Pear</li>
        <li>Bananna</li>
        <li>Apple</li>
        <li>Cucumber</li>
    </ul>
  </div>
</div>

<div id="footer">
    <p>Unless otherwise noted, this content is licensed under a <a href="http://creativecommons.org/licenses/by/3.0" target="_new">Creative Commons Attribution 3.0 License</a>.<br />Visit <a href="http://jenniferperrin.com/blog" target="_new">www.jenniferperrin.com</a> for more <a href="http://jenniferperrin.com/blog/snippets/">Snippets</a> and <a href="http://jenniferperrin.com/blog/category/tutorial/">Tutorials</a>.</p>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Dosis);

body { margin: 10px 40px; font-family:'Dosis'; font-size: 18px; }
h1 {
    display: block;
    margin: 20px 0 6px 0;
    font-size: 26px;
    color: rgba(138,152,182,1);
    text-decoration: none;
}
    h1:hover { color: rgba(138,152,182,0.7); }

ul { list-style: none; }

/* -- Simple Grid System - http://jsfiddle.net/fLuRA -- */
[class*='col-'] { float: left; }
    .col-1-2 { width: 50%; }
    .grid:after {
      content: "";
      display: table;
      clear: both;
    }

/* -- FOOTER -- */
#footer { margin-top: 40px; clear:both; }
    #footer p {
        text-align: center;
        font-size: 16px;
    }
    #footer a, #footer a:visited {
        color: rgba(138,152,182,1);
        text-decoration: none;
        font-weight: bold;        
        outline: none;
    }
        #footer a:hover { color: rgba(138,152,182,0.8); text-decoration: none; }

JavaScript

alert($("#grid").find("#1").attr("class"));