javascript - 复杂的 jQuery div 排序

Question

我正在尝试以不同的方式对一些 DIVS 进行排序，但我完全迷失了。我一直在尝试一些东西，但我不知道如何让它发挥作用。

我在容器内有一组具有相同类、不同 id、rels 和数据属性的不同 div。

<div id="container">
    <div class="sortable" id="div541" rel="1234" data-rel="Name One">
        [some inside html including a table and divs]
    </div>
    <div class="sortable" id="div354" rel="4321" data-rel="Name Two">
        [some inside html including a table and divs]
    </div>
    <div class="sortable" id="div763" rel="112233" data-rel="Name Three">
        [some inside html including a table and divs]
    </div>
</div>

然后我有一个<select>用户在其中选择排序类型的元素。选项通过 rel 属性中“存储”的数值(升序和降序)以及 data-rel 属性中“存储”的名称(升序和降序)来表示。

首先我想到了像 Quicksand 这样的 jQuery 插件但它会克隆元素并更改其 ID，并且每个可排序 div 内都有几个元素，我需要保留它们的 ID 以便从容器外部与它们进行交互。我搜索了其他插件，但它们都做了一些排序，但以不同的方式，我决定自己这样做。

所以我做了一些谷歌搜索和 stackoverflowing，发现我可以通过执行以下操作对 div 进行排序:

 var ids = ['#div541', '#div354', '#541' ...];
 var cont = $('#resultados');
 $.each(ids, function(i, v) {
     cont.append($(v));
 });

但是在进行实际排序之前我必须对 ID 数组进行排序，这就是我迷失的地方。 在我继续之前，这是实现排序的最佳方法吗？ container.append 部分会修改任何 ID 或重复项和 div 吗？

如果可以的话，可以帮我做一下吗？

我首先会做一个 $('.sortable).each()我在其中制作了一个 3“列”数组。然后我对 rel 或 data-rel 属性 ASC 或 DESC 进行排序，一旦数组排序完毕，我就用它来将 div 追加()回容器中。这个可以吗？我特别讨厌在 JavaScript 中使用数组，所以您能帮我制作一个函数来对其进行排序，然后按顺序获取 ID 列表吗？

非常感谢!

Answer 1

一个有趣的排序方法是创建一个精心设计的字符串数组，其中包含排序后的属性值、sperarator 和元素的 ID。

在示例数据中，字符串数组应如下所示:

['Name One#div541', 'Name Two#div354', 'Name Three#div763', ...]

或者如果您想按数值排序:

['0001234#div541', '0004321#div354', '0112233#div763', ...]

请注意，在这种情况下，您应该用零填充数字字符串，以便按字符串排序是正确的。

之后，您可以简单地在数组上使用 javascript .sort() 方法。数组排序后，您可以通过解析分隔符之前的数据来获取 ID。

如果希望按降序排序，只需在排序后使用.reverse()即可。

编辑

您可以将精心制作的数组转换为您想要的 ID 数组，如下所示:

var idsArray = $.map( craftedArray, function(val, i) {
  return val.substring(val.indexOf('#'));
});