jquery - Order DIV's by Value Username Value within -

i have following dom structure. each 'contactsbodymaindisplaymembercontainerdiv' shows member photo, name etc.

i need able re-order these containerdiv's h2 username z.

so below need move 'contactsbodymaindisplaymembercontainerdiv' pieces of dom it's ordered adam, bob, eric. note: need move whole piece of dom each user.

<div id="contactsbodymaincontainerdiv">   <div class="contactsbodymaindisplaymembercontainerdiv">   <div class="contactsbodymaindisplaymemberwrapperdiv">    <h2 class="contactsbodymaindisplaymemberusernameh2">eric</h2>   </div>  </div>   <div class="contactsbodymaindisplaymembercontainerdiv">   <div class="contactsbodymaindisplaymemberwrapperdiv">    <h2 class="contactsbodymaindisplaymemberusernameh2">adam</h2>   </div>  </div>   <div class="contactsbodymaindisplaymembercontainerdiv">   <div class="contactsbodymaindisplaymemberwrapperdiv">    <h2 class="contactsbodymaindisplaymemberusernameh2">bob</h2>   </div>  </div>  </div> 

i'm unsure how this.

note: need function members added on fly.

any advise on how achieve this?

hope code helps

var sorted = $('.contactsbodymaindisplaymembercontainerdiv').sort(function(a,b){     return $(a).find('.contactsbodymaindisplaymemberusernameh2').text() < $(b).find('.contactsbodymaindisplaymemberusernameh2').text()) ? 1 : -1; });  $('. contactsbodymaincontainerdiv').html(sorted);