Question

我有以下DOM结构。每个＆＃39; contactsBodyMainDisplayMemberContainerDIV＆＃39;显示会员照片，姓名等。

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

所以下面需要移动＆＃39; contactsBodyMainDisplayMemberContainerDIV＆＃39; DOM的片断，所以它命令亚当，鲍勃，埃里克。注意：我需要为每个用户移动整个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);

Answer 2

我创建了一个选项列表，然后很容易排序：

标记：

<ul id="my_list">
    <option value="Eric">Eric</option>
    <option value="Adam">Adam</option>
    <option value="Bob">Bob</option>
</ul>

的javascript：

$("#my_list").html($("#my_list option").sort(function (a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
}))

这里是小提琴：http://jsfiddle.net/zRA5b/1/

注意：您显然可以将所有div添加到<option>个标记中：点击此处：http://jsfiddle.net/zRA5b/2/

编辑：您还可以按选项值排序（如果您希望按其他数据库值排序，如年龄或姓氏等，可能会派上用场）：

$("#my_list").html($("#my_list option").sort(function (a, b) {
    return a.value== b.value? 0 : a.value< b.value? -1 : 1
}))

按价值用户名值订购DIV

2 个答案: