Question

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

我有一组不同的div，在容器中有相同的类，不同的id，rels和data-attribute。

<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('#'));
});

复杂的jQuery div排序

1 个答案:

修改