javascript - 按重量对列表进行排序，选取项目的开头并为其分配自定义权重

Question

我想根据元素的标题/描述对列表进行排序。

根据第一个单词，分配权重以便稍后定义自定义顺序。

来自:

• 列表 4200 中的第三个元素
• 列表 3200 中的第一个元素
• 列表 3200 中的第一个元素
• 列表 5200 中的第四个元素
• 列表 2200 中的第二个元素
• 列表 2200 中的第二个元素

致:

• 列表 3200 中的第一个元素
• 列表 3200 中的第一个元素
• 列表 2200 中的第二个元素
• 列表 2200 中的第二个元素
• 列表 4200 中的第三个元素
• 列表 5200 中的第四个元素

Any title that we are not controlling, will be assigned a predetermined weight (the heaviest) so that it appears at the end.

var list = $('.list');
var listItems = list.children('li').get();

$(listItems).each(function() {
  var $this = $(this);
  var description, focusDescription;
  var weight;
  
  description = $this.find('span.description a').text();
  focusDescription = description.split(' ')[0];

  switch (focusDescription) {
    case 'First':
      weight = 1;
      // code block logic
      break;
    case 'Second':
      weight = 2;
      // code block logic
      break;
    case 'Third':
      weight = 3;
      // code block logic
      break;
    case 'Fourth':
      weight = 4;
      // code block logic
      break;
    default:
      weight = 5;
      // code block logic
  }

});

listItems.sort(function(a, b) {
  // code block logic
})
$.each(listItems, function(idx, itm) {
  list.append(itm);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
  <li class="list-element">
    <span class="description">
            <a href="#">Third element in list</a>
        </span>
    <span class="years">4</span>
    <span class="EC">200</span>
  </li>
  <li class="list-element">
    <span class="description">
            <a href="#">First element in list</a>
        </span>
    <span class="years">3</span>
    <span class="EC">200</span>
  </li>
  <li class="list-element">
    <span class="description">
            <a href="#">First element in list</a>
        </span>
    <span class="years">3</span>
    <span class="EC">200</span>
  </li>
  <li class="list-element">
    <span class="description">
            <a href="#">Fourth element in list</a>
        </span>
    <span class="years">5</span>
    <span class="EC">200</span>
  </li>
  <li class="list-element">
    <span class="description">
            <a href="#">Second element in list</a>
        </span>
    <span class="years">2</span>
    <span class="EC">200</span>
  </li>
  <li class="list-element">
    <span class="description">
            <a href="#">Second element in list</a>
        </span>
    <span class="years">2</span>
    <span class="EC">200</span>
  </li>
</ul>

Answer 1

您可以通过定义一个 JS 对象来对它们进行排序，其中将优先考虑每个单词。因此，您将使用此优先级作为排序函数的排名。您的 js 代码将如下所示:

var rank = {
    First:0,
    Second:1,
    Third:2,
    Fourth:3,
}
var list = $('.list');
var listItems = list.children('li').get();

listItems.sort(function(a, b) {
  return rank[$(a).find('span.description a').text().split(' ')[0]] - rank[$(b).find('span.description a').text().split(' ')[0]]
})
$.each(listItems, function(idx, itm) {
  list.append(itm);
});