基于 DOM 值的 DOM 对象的 JQuery 排序数组答案

【问题标题】：JQuery Sort Array of DOM Objects based off DOM values基于 DOM 值的 DOM 对象的 JQuery 排序数组
【发布时间】：2014-01-25 03:21:24
【问题描述】：

我已经使用 Jquery 几年了，但这个问题突破了我的极限。

我有一个 DOM 对象数组，我正在根据多个条件对其进行排序。我这样创建数组：

var conversationsInBoxMemberUserIDsArray = $('#conversationsInBoxMessagesWrapperDIV').children().map(function() {return $(this);}).get();

推入数组的每个项目都是 DOM 的一部分。或者对 DOM 的一部分的引用可能是一种更好的表达方式。我可以看到它指的是 DOM 的一部分，因为当我更改顺序并将此数组附加回根 DIV 时，所有对象（带有内容的 DIV）的顺序都会在视觉上发生变化。 DOM的部分喜欢这样（减少版本以节省时间/空间）：

<divContainer>
  <div_sub1>
    <div sub2>
      <h3 class="name">Adam</h3>
    </div>
  </div>
</div>

我想根据带有 $(.name) 类的 DOM element.text 值对这个 DOM 对象数组进行排序

例如：A-Z 基于此名称的文本值 - 例如：Adam before Ben

这可能吗？

这可以使用标准排序函数来完成吗：

theArray.sort(function(a, b){
   if (a.Field2 == b.Field2) return 0;
   if (a.Field2 < b.Field2) return -1;
   return 1;
 });

任何建议将不胜感激。还需要对 unix 时间戳执行相同操作。

亚当

【问题讨论】：

您要排序什么级别？包含class="name" 的级别，或者您想使用该文本作为排序键，但对更高级别的容器 div 进行排序？请在示例之前和之后显示至少两个已排序的项目，以便我们更清楚地看到您要最终得到什么。

标签： jquery arrays sorting object

【解决方案1】：

试试类似的东西

var $ct = $('#container'),
    $items = $ct.children(),
    array = $items.get();

array.sort(function (o1, o2) {
    return $(o1).find('.header h3').text().localeCompare($(o2).find('.header h3').text())
});

$ct.append(array)

演示：Fiddle

做了一些值的缓存后，你可以试试

var $ct = $('#container'),
    $items = $ct.children(),
    array = $items.map(function () {
        var $this = $(this);
        $this.data('header', $.trim($this.find('.header h3').text()))
        return $this;
    }).get();

array.sort(function (o1, o2) {
    return o1.data('header').localeCompare(o2.data('header'))
});

$ct.append(array)

演示：Fiddle

【讨论】：

【解决方案2】：

你可以这样做：

var arr_children_to_sort = $('div').children(...);

arr_children_to_sort.sort(function(a, b) {
    if ($(a).find('h3').hasClass('name')) {
        if ($(b).find('h3').hasClass('name')) {
            return (($(a).find('h3').text() >= $(b).find('h3').text()) ? 1 : -1);
        }
        return 1;
    }
    else if ($(b).find('h3').hasClass('name')) {
        return -1;
    }

    return 0;
});

只需切换返回语句的值以设置您需要的实际顺序。

【讨论】：