如何在JS中用符号对列表进行排序 [英] How to sort a list with symbols in js

问题描述

我有一个下拉列表，其中包含如下所示的选项:

I have a drop down with a list of options which looks like this:

<select id="weightClass" class="form-control input-sm">
     <option value="Default">Please Select</option>
     <option>200</option>
     <option>&lt;200</option>
     <option>&gt;200</option>
     <option>Unknown</option>
</select>

我正在尝试按自定义顺序对它们进行排序，因此看起来像这样:

I'm trying to sort them in a custom order so it looks like this:

<select id="weightClass" class="form-control input-sm">
     <option value="Default">Please Select</option>
     <option> <200 </option>
     <option> 200 </option>
     <option> >200 </option>
     <option>Unknown</option>
</select>

基本上将其排列成使得小于选项首先出现，然后是标准，然后是大于，然后是未知.

Basically arranging it so that the less than option comes first, then the standard, then greater than, then unknown.

这是动态生成的，值可以是任何值，但始终为4，且始终采用该格式.始终包含未知的>，<和标准值.

This is dynamically generated, the values could be anything, but there is always 4, and always in that format. Always including an unknown, >, < and standard value.

我当前的代码是:

function sortDropDown(target) {
    $(target).html($(target + " option").sort(function (a, b) {
        return a.text === b.text ? 0 : a.text < b.text ? -1 : 1;
    }));
}

这显然行不通，关于如何解决这个问题的任何想法，似​​乎都找不到关于><的任何信息.包括符号.

Which obviously doesnt work, any ideas how i could get around this, can't seem to find anything about sorting with > < symbols included.

推荐答案

提取文本(不包括第一个文本)，使用排序后的数组对文本进行排序和交换

Extract the text (exclude the 1st one), sort and swap out the text using the sorted array

使用HTML

<select id="weightClass" class="form-control input-sm">
    <option value="Default">Please Select</option>
    <option>&lt;200</option>
    <option>&gt;200</option>
    <option>200</option>
    <option>Unknown</option>
</select>

您可以使用此脚本(上述HTML的 之后)

you can use this script (after the above HTML)

var sortOrder = {
    '<': 1,
    // placeholder for the value
    '>': 3,
    'U': 4
}

function sortDropDown(target) {
    // get text
    var opts = [];
    $(target + " option").each(function (i) {
        if (i)
            opts.push($(this).text())
    });

    opts.sort(function (a, b) {
        // get the sort order using the first character
        var oa = sortOrder[a[0]] || 2;
        var ob = sortOrder[b[0]] || 2;
        if (oa > ob)
            return 1;
        else if (oa < ob)
            return -1;
        else
            return 0;
    });

    // change the option text
    $(target + " option").each(function (i) {
        if (i)
            $(this).text(opts[i - 1])
    });
}

sortDropDown("#weightClass")

var sortOrder = {
  '<': 1,
  '>': 3,
  'U': 4
}
function sortDropDown(target) {
  var opts = [];
  $(target + " option").each(function (i) {
    if (i)
      opts.push($(this).text())
      });
  console.log(opts)
  opts.sort(function (a, b) {
    var oa = sortOrder[a[0]] || 2;
    var ob = sortOrder[b[0]] || 2;
    if (oa > ob)
      return 1;
    else if (oa < ob)
      return -1;
    else
      return 0;
  });
  $(target + " option").each(function (i) {
    if (i)
      $(this).text(opts[i - 1])
      });
}

sortDropDown("#weightClass")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="weightClass" class="form-control input-sm">
    <option value="Default">Please Select</option>
    <option>&lt;200</option>
    <option>&gt;200</option>
    <option>200</option>
    <option>Unknown</option>
</select>

这篇关于如何在JS中用符号对列表进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！