Question

我有内置li元素的ul元素...我需要在动态添加li元素与ASC排序但是MAG250需要放在底部而其他项目在顶部...这里是jsfiddle中的示例：< / p>

http://jsfiddle.net/hjzxumjd/1/

所以输入是这样的：

AAA aaa (64)
BBB (130)
DDD ddd (26)
GGG ggg (253)
MAG250 AAA (0)
MAG250 CCC (0)
MAG250 BBB (0)
MMM (254)

我需要在调用函数sortUnorderedList（＆＃39; test＆＃39;）时得到它：

AAA aaa (64)
BBB (130)
DDD ddd (26)
GGG ggg (253)
MMM (254)
MAG250 AAA (0)
MAG250 BBB (0)
MAG250 CCC (0)

因此，您可以看到我获得了排序ASC的顶部字符串，然后按照包含单词MAG的ASC字符串进行排序。

我尝试使用jsfiddle中的函数，但我无法在javascript中实现此功能。

Answer 1

在您当前的实现中，排序可以替换为自定义排序，如果项目都是＆＃39; mag，则使用正常的字符串比较，否则非mags首先出现：

                  var ismag = function(a){return a.slice(0,3) =='MAG';};
                  vals.sort(function(a1,a2){
                      var m1 = ismag(a1), m2 = ismag(a2); 
                      if(m1===m2)return a1.localeCompare(a2); //if both are 'mag' or neither is, use string comparison
                      return m1 - m2;
                  });

在Fiddle

中实施

为了检查项目是否为＆＃39; mag＆＃39;，此处使用了辅助函数（ismag）。在此处的实现中，将以＆＃39; MAG＆＃39;开头检查文本。（如果兼容性不是问题，则有ES6 startsWith功能。如果排序顺序真的要查看描述中提到的contains，那么辅助函数可以更改为var ismag = function(a){return a.indexOf('MAG') !== -1;};

Answer 2

您的JS Fiddle示例已经在Firefox和Chrome中为我排序了ASC阵列。

您可以尝试调用自己的排序功能以确保比较结果。

 vals.sort(function(a, b) {
   return a >  b;
 });

Answer 3

您必须手动排序数组。您可以删除特定元素，然后将其推入排序数组。以下是描述它的fiddle。

代码

＆＃13;

// Updated Code

var rawArray = ["AAA aaa (64)",
  "BBB (130)",
  "DDD ddd (26)",
  "GGG ggg (253)",
  "MAG250 AAA (0)",
  "MAG250 CCC (0)",
  "MAG250 BBB (0)",
  "MMM (254)"
]

function sortArray(array) {
  array.sort(function(a, b) {
    if (a < b) return -1;
    if (a > b) return 1;
    return 0;
  });
  return array;
}

function customSort(array) {
  var magArr = [];
  var retArr = [];
  array.forEach(function(row) {
    if (row.indexOf("MAG250") >= 0) {
      magArr.push(row);
    } else {
      retArr.push(row);
    }
  });

  retArr = sortArray(retArr);
  magArr = sortArray(magArr);

  magArr.forEach(function(row) {
    retArr.push(row);
  })
  return retArr;
}

function createHTML(array) {
  var html = "";
  array.forEach(function(row, index) {
    html += "<li id'" + index + "'>" + row + "</li>";
  });
  document.getElementById("list").innerHTML = html;
}
var sortedArray = customSort(rawArray);
createHTML(sortedArray);

// Original Code

function sortUnorderedList(ul, sortDescending) {
  if (typeof ul == "string") ul = document.getElementById(ul);

  var lis = ul.getElementsByTagName("A");
  var vals = [];

  for (var i = 0, l = lis.length; i < l; i++)
    vals.push(lis[i].innerHTML);

  vals.sort();

  if (sortDescending) vals.reverse();

  for (var i = 0, l = lis.length; i < l; i++)
    lis[i].innerHTML = vals[i];
}

sortUnorderedList('test');

＆＃13;

Your Code:
<ul id="test">
  <li><a id="1">AAA aaa (64)</a>
  </li>
  <li><a id="2">DDD ddd (26)</a>
  </li>
  <li><a id="3">BBB (130)</a>
  </li>
  <li><a id="4">MMM (254)</a>
  </li>
  <li><a id="5">GGG ggg (253)</a>
  </li>
  <li><a id="6">MAG250 AAA (0)</a>
  </li>
  <li><a id="7">MAG250 CCC (0)</a>
  </li>
  <li><a id="8">MAG250 BBB (0)</a>
  </li>
</ul>

My Code
<div>
  <ul id="list"></ul>
</div>

＆＃13;

Answer 4

此解决方案具有临时数组和两级排序。

var array = ['AAA aaa (64)', 'BBB (130)', 'DDD ddd (26)', 'GGG ggg (253)', 'MAG250 AAA (0)', 'MAG250 CCC (0)', 'MAG250 BBB (0)', 'MMM (254)'],
    mapped = array.map(function (el, i) {
        var o = { index: i, value1: '', value2: '' };                
        if (el.substr(0, 3) === 'MAG') {                    
            o.value1 = el;
        } else {
            o.value2 = el;
        }
        return o;
    });
mapped.sort(function (a, b) {
    return a.value1.localeCompare(b.value1) || a.value2.localeCompare(b.value2);
});
var result = mapped.map(function (el) {
    return array[el.index];
});
document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');

奖金：更短的版本：

var array = ['AAA aaa (64)', 'BBB (130)', 'DDD ddd (26)', 'GGG ggg (253)', 'MAG250 AAA (0)', 'MAG250 CCC (0)', 'MAG250 BBB (0)', 'MMM (254)'],
    result = array.map(function (el, i) {
        return { index: i, value: (el.substr(0, 3) === 'MAG' ? '2' : '1') + el };
    }).sort(function (a, b) {
        return a.value.localeCompare(b.value);
    }).map(function (el) {
        return array[el.index];
    });
document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');

Answer 5

我会创建一个匹配的正则表达式（在本例中为^MAG250），如果是这种情况，则将它们附加到单独的数组中。在将其添加回DOM之前，请再次合并两个数组。

function sortUnorderedList(ul, sortDescending, last) {
    var lastItems = [];

    if(typeof ul == "string") {
        ul = document.getElementById(ul);
    }

    var lis = ul.getElementsByTagName("A");
    var vals = [];

    for(var i = 0, l = lis.length; i < l; i++) {
        if(last.test(lis[i].innerHTML)) {
            lastItems.push([lis[i].innerHTML, lis[i].id]);
        } else {
            vals.push([lis[i].innerHTML, lis[i].id]);
        }
    }

    lastItems.sort(sortByText);

    vals.sort(sortByText);

    if(sortDescending) {
        lastItems.reverse();
        vals.reverse();
    }

    vals = vals.concat(lastItems);

    for(var i = 0, l = lis.length; i < l; i++) {
        lis[i].innerHTML = vals[i][0];
        lis[i].id = vals[i][1];
    }

    function sortByText(a, b) {
        return a[0].localeCompare(b[0]);
    }
}

sortUnorderedList('test', false, /^MAG250/);

https://jsfiddle.net/hjzxumjd/7/

或者，您可以尝试自定义排序。

Javascript数组排序将字符串MAG250放在底部，将其他项放在顶部ASC

5 个答案:

代码