title: Place divs in alphabetical order by data attribute
body: <p>I am trying to place my divs into alphabetical order and failing with my jQuery code: </p>
  
  <pre><code>var $wrapper = $('.modal .row');
  $wrapper.find('.txt_center').sort(function (a, b) {
  return +a.getAttribute('data-ename') &gt; +b.getAttribute('data-ename'); }).appendTo($wrapper);
  </code></pre>
  
  <p>The html code is below:</p>
  
  <pre><code>&lt;div class="modal" id="staff" style="text-align: center;"&gt;
  
  &lt;div class="row txt_center"&gt;
      &lt;div class="txt_center" data-ename="William Black"&gt;
          &lt;p class="profile-name"&gt;&lt;strong&gt;William Black&lt;/strong&gt;
  
          &lt;/p&gt;
          &lt;p class="profile-details"&gt;Title&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="txt_center" data-ename="Ariel White"&gt;
          &lt;p class="profile-name"&gt;&lt;strong&gt;Ariel White&lt;/strong&gt;
  
          &lt;/p&gt;
          &lt;p class="profile-details"&gt;Title&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="txt_center" data-ename="John Smith"&gt;
          &lt;p class="profile-name"&gt;&lt;strong&gt;John Smith&lt;/strong&gt;
  
          &lt;/p&gt;
          &lt;p class="profile-details"&gt;Title&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="txt_center" data-ename="Vanessa Mae"&gt;
          &lt;p class="profile-name"&gt;&lt;strong&gt;Vanessa Mae&lt;/strong&gt;
  
          &lt;/p&gt;
          &lt;p class="profile-details"&gt;Title&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please help me with my problem on JSfiddle: <a href="http://jsfiddle.net/8rhg4337/1/" rel="nofollow">http://jsfiddle.net/8rhg4337/1/</a></p>
  
  <p>Really appreciate your help.</p>