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()遵循选定的顺序来重新排序li。

新代码段

使用.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>

旧代码段

我想不出一种更简单的方法……但是.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对象的数组来给出适当的顺序。

dataOrder中的

states键将保留索引的data数组的顺序：

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

注意：在模板视图中，您可以像在问题中所写的那样使用小胡子或把手

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

PRODUCTS COMPLETE
NEW PRODUCT: ...
NEW PRODUCT: ...
....

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;

Answer 5

您需要为ul的{{1}}的元素添加一个唯一的选择器，以便可以选择它们，例如，我正在考虑li将包含条件选择器，然后在选择的select上调用一个函数，在内部调用一个函数来更改列表的顺序。

以下是代码段：

onChange

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;
  }
}

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

5 个答案: