jquery - 按值订购 DIV 用户名 值范围内

Question

我有以下 DOM 结构。每个“contactsBodyMainDisplayMemberContainerDIV”显示成员照片、姓名等。

我需要能够通过 H2 用户名 A 到 Z 重新排序这些 ContainerDIV。

因此，下面的代码需要移动 DOM 的“contactsBodyMainDisplayMemberContainerDIV”部分，以便按 Adam、Bob、Eric 的顺序排列。注意:我需要为每个用户移动整个 DOM。

<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>

我不确定如何执行此操作。

注意:它需要此功能，因为成员将动态添加。

关于如何实现这一目标有什么建议吗？

Answer 1

希望这段代码有帮助

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

$('. contactsBodyMainContainerDIV').html(sorted);