Reorder li items according to a variable/condition

Question

I have a list as follows:

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

What I want is to order the list based on different conditions. For example if the variable state == "foo", I want the Fourth li to appear first and the Second li to appear last like so:

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

And if the state == "bar" I want the list to appear in some other way.

Also consider that there may be future conditions where state may be equal to "baz" or "foobar" each having their own order. So writing custom conditionals for each state is not an option.

My idea was to maintain an ordered array for each state and then render the list according to the array using something like Mustache or Handlebars. Is there any better solution to this which is also future proof?

Hey @radiantshaw, just to let you know I've added a snippet without jQuery! — Takit Isy, Aug 21 '18 at 18:14

score 4 · Accepted Answer · edited Nov 26 '18 at 09:27

Here is how I'll do it:

Using an object to store the different orders,
Using a .forEach() to follow the selected order to re-order the lis.

New snippets

Using .map(), the on 'change' function can be reduced to a single line!

Without jQuery (lighter!)

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>

With 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>

Old snippet

I couldn't think about an easier way… but .map() was a good point!

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>

I think it will be more effective to use Array.prototype.map() in your solution — Yosvel Quintero, Aug 17 '18 at 09:05
Weird how jQuery's `html()` accepts arrays but the docs never mention it. — radiantshaw, Aug 18 '18 at 06:04
@radiantshaw True. :) But it also makes sense, because a node is array-like when it has children. — Takit Isy, Aug 18 '18 at 08:01
For information, I've added `.join('')` in the JavaScript-only snippet because it was returning the `outerHTML` of the elements with a trailing comma. I picked this [solution](https://stackoverflow.com/a/45812277/5061000) to correct this behaviour. — Takit Isy, Aug 21 '18 at 19:00

Yosvel Quintero · Answer 2 · 2018-08-17T09:02:01.193

3

I suggest to work with a constant for data and an array of states objects to give the appropriate order.

dataOrder key in the states will hold the order for the indexed data array:

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

Note: In the template view you can use Mustache or Handlebars as you wrote in the question

edited Aug 17 '18 at 09:02

answered Aug 17 '18 at 07:52

Yosvel Quintero

18,669
5
37
46

1

This is also what I thought initially. I'm waiting for better ways than this. Otherwise this is the answer in my opinion. – radiantshaw Aug 17 '18 at 07:59
2

This is fine if you need to inevitably order all the different `states` but if you are simply trying to access one of them, an array is probably not the best option because you'd have to dig through the `states` array to find the order. – aug Aug 17 '18 at 08:08
1

@aug very good comment.. By the way, with an object as you post in your answer is the best approach!! +1 – Yosvel Quintero Aug 17 '18 at 08:22
It's kind of funny how your orders are exactly the same as mine…(https://stackoverflow.com/a/51891366/5061000) since you added the other approach. Anyway, @aug got the best approach. You should have created a snippet with that, aug. – Takit Isy Aug 17 '18 at 08:57
@TakitIsy You right: removed.. Buy yes, you can see there is needed a good refactor on your answer ;) – Yosvel Quintero Aug 17 '18 at 09:03

score 2 · Answer 3 · answered Aug 17 '18 at 08:05

2

Probably the best option is to just maintain a map of the states which map to the order.

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

And then access the order by passing in the state.

const listOrder = statesOrder[state];

Also don't forget that if you only need to order the list in a visual way, CSS has an order property you might be able to take advantage of.

answered Aug 17 '18 at 08:05

aug

11,138
9
72
93

Good point about CSS `order` property. This was also one of the solutions I came across when searching for it. But the same issue that I have to define individual orders for each condition using `.classes`. But maybe I'll use this is it's not too long. – radiantshaw Aug 17 '18 at 08:17
1

@radiantshaw while generally frowned upon, you could still append the order values directly as `style` attributes. So you could do `
Fourth

aug

Aug 17 '18 at 08:49

I think this will be acceptable up to a certain point. Good point! – radiantshaw Aug 17 '18 at 09:03

Harun Or Rashid · Answer 4 · 2018-08-17T07:52:02.187

1

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>

edited Aug 17 '18 at 07:52

answered Aug 17 '18 at 07:48

Harun Or Rashid

5,589
1
19
21

But I still have to rearrange the values using `if` conditions, right? – radiantshaw Aug 17 '18 at 08:01
Yap. I thought you wants this way :) Rearrange upon condition. – Harun Or Rashid Aug 17 '18 at 08:02
Acceptable answer, but still waiting for better solutions. – radiantshaw Aug 17 '18 at 08:03

score 1 · Answer 5 · answered Aug 17 '18 at 07:51

You need to add a unique selector to the elements of the ul's li so you can select them, as for example, I am considering a select will contain the condition selector and then on the onChange of the select I am calling a function which inside is calling a function to change the order of the list.

Here is the snippet:

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>

The problem with this is that if there are 100 states, then the `switch` cases become very lengthy. And it will be a hard to maintain code. I need better solutions even though this gets the job done. — radiantshaw, Aug 17 '18 at 08:00

Reorder li items according to a variable/condition

5 Answers5