根据变量/条件对 li 项重新排序

Question

我有一个清单如下：

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
  <li>Fifth</li>
</ul>

我想要的是根据不同的条件对列表进行排序。例如，如果变量state == "foo"，我希望Fourth li 首先出现，Second li 最后出现，如下所示：

<ul>
  <li>Fourth</li>
  <li>First</li>
  <li>Third</li>
  <li>Fifth</li>
  <li>Second</li>
</ul>

如果state == "bar" 我希望列表以其他方式出现。

还要考虑到将来可能存在state 可能等于"baz" 或"foobar" 的情况，每个都有自己的顺序。因此，为每个状态编写自定义条件不是一种选择。

我的想法是为每个状态维护一个有序数组，然后使用诸如 Mustache 或 Handlebars 之类的东西根据数组呈现列表。有没有更好的解决方案，也是未来的证明？

Answer 1

我会这样做：

• 使用对象来存储不同的订单，
• 使用.forEach() 遵循所选顺序以重新订购lis。

新的 sn-ps

• 使用.map()，可以将'change' function 缩减为一行！

没有 jQuery（更轻！）

var original_list = document.querySelectorAll('#listToOrder li');
const orders = {
  def: [0, 1, 2, 3, 4],
  foo: [3, 0, 2, 4, 1],
  bar: [3, 2, 4, 1, 0],
  baz: [2, 4, 0, 3, 1]
}

document.querySelector('#selector').addEventListener('change', function() {
  document.querySelector('#listToOrder').innerHTML = orders[this.value].map(index => original_list[index].outerHTML).join('');
});

<ul id="listToOrder">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
  <li>Fifth</li>
</ul>
<label>Select order: </label>
<select id="selector">
  <option value="def">Default</option>
  <option value="foo">Foo</option>
  <option value="bar">Bar</option>
  <option value="baz">Baz</option>
</select>

使用 jQuery

var original_list = $('#listToOrder li');
const orders = {
  def: [0, 1, 2, 3, 4],
  foo: [3, 0, 2, 4, 1],
  bar: [3, 2, 4, 1, 0],
  baz: [2, 4, 0, 3, 1]
}

$('#selector').on('change', function() {
  $('#listToOrder').html(orders[this.value].map(index => original_list[index].outerHTML));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="listToOrder">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
  <li>Fifth</li>
</ul>
<label>Select order: </label>
<select id="selector">
  <option value="def">Default</option>
  <option value="foo">Foo</option>
  <option value="bar">Bar</option>
  <option value="baz">Baz</option>
</select>

---

老sn-p

我想不出更简单的方法……但.map() 是个好点子！

var original_list = $('#listToOrder li');
const orders = {
  def: [0, 1, 2, 3, 4],
  foo: [3, 0, 2, 4, 1],
  bar: [3, 2, 4, 1, 0],
  baz: [2, 4, 0, 3, 1]
}

$('#selector').on('change', function() {
  var lis = '';
  orders[this.value].forEach(function(i){
    lis += original_list[i].outerHTML;
  })
  $('#listToOrder').html(lis);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="listToOrder">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
  <li>Fifth</li>
</ul>
<label>Select order: </label>
<select id="selector">
  <option value="def">Default</option>
  <option value="foo">Foo</option>
  <option value="bar">Bar</option>
  <option value="baz">Baz</option>
</select>

Answer 2

我建议使用 data 的常量和 states 对象的数组来给出适当的顺序。

states 中的dataOrder 键将保存索引data 数组的顺序：

const data = ['First', 'Second', 'Third', 'Fourth', 'Fifth'];
const states = [
  {
    state: 'foo',
    dataOrder: [0, 1, 2, 3]
  },
  {
    state: 'bar',
    dataOrder: [3, 2, 1, 0]
  }
];

注意：在模板视图中，您可以使用问题中所写的 Mustache 或 Handlebars

Answer 3

可能最好的选择是只维护一个映射到订单的州地图。

const statesOrder = {
  'foo':  [0, 1, 2, 3],
  'baz': [2, 1, 3, 0],
   ...
}

然后通过传入state来访问订单。

const listOrder = statesOrder[state];

另外别忘了，如果您只需要以视觉方式对列表进行排序，CSS has an order property 您也许可以利用。

Answer 4

你需要给ul的li的元素添加一个唯一的选择器，这样你就可以选择它们，比如我正在考虑一个select会包含条件选择器，然后在@ 987654324@的select我正在调用一个函数，里面正在调用一个函数来改变列表的顺序。

这里是sn-p：

var list = $('#listToOrder');
var original_order = $('#listToOrder').html();
$('#ddlchangeOrder').on('change', function() {
  var selected_value = this.value;
  orderSwitcher(selected_value);
});

function orderSwitcher(order) {
  switch (order) {
    case "foo":
      var elementToPush = list.find('li[data-select="4"]').clone(); //creating a clone of the element
      list.find('li[data-select="4"]').remove(); //removing the existing element
      list.prepend(elementToPush);
      break;
    case "bar":
      var elementToPush = list.find('li[data-select="2"]').clone(); //creating a clone of the element
      list.find('li[data-select="2"]').remove(); //removing the existing element
      list.prepend(elementToPush);
      break;
      //add other cases as per your need.
    default:
      list.html(original_order);
      break;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="listToOrder">
  <li data-select="1">First</li>
  <li data-select="2">Second</li>
  <li data-select="3">Third</li>
  <li data-select="4">Fourth</li>
  <li data-select="5">Fifth</li>
</ul>
<div>
  <label for="ddlchangeOrder">Define Order</label>
  <select name="" id="ddlchangeOrder">
    <option value="0">Select Order</option>
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
    <option value="no">no Case</option>
  </select>
</div>

Answer 5

var values= ["First", "Second", "Third", "Fourth", "Fifth"];
//Re-arrange values on condition(state == "bar"/"foo" etc)

var element = '<ul>'

for(var i = 0; i < values.length; i++){
    var value = values[i];
    element += '<li>'+ value+ '</li>';
} 

element += '</ul>';
document.getElementById("ulContainer").innerHTML = element;

<div id="ulContainer"></div>