How to reorder a HTML list with jQuery after a button click?

Question

I would like to return a list of numeric elements after clicking the "Click me!" with jQuery only.

For example, the follow values:

55.5
456.5
.54
32.2

Should be:

.54
32.2
55.5
456.5

Code:

$(function() {
  $('.btn').on('click', function() {
    $('input').keyup(function() {
      var start = $(this).index('input');
      var target = $(this).val() - 1;
      if (target < start) $(this).parent().insertBefore($('li').eq($(this).val() - 1));
      if (target > start) $(this).parent().insertAfter($('li').eq($(this).val() - 1));
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="ItemList">
  <li>some number 1
    <input id="Text1" type="number" value="32.2" />
  </li>
  <li>some number 2
    <input id="Text2" type="number" value="456.5" />
  </li>
  <li>some number 3
    <input id="Text3" type="number" value="55.5" />
  </li>
  <li>some number 4
    <input id="Text4" type="number" value=".54" />
  </li>
</ul>

<button class='btn'>
      Click me!
    </button>

But, not work. I managed to get it to work, but the function only recognizes the first digit. The others she ignores.

did you read this: https://stackoverflow.com/questions/69809178/what-is-the-most-efficient-way-to-sort-dom-elements-based-on-values-in-an-array or this https://stackoverflow.com/questions/14160498/how-can-i-sort-elements-by-numerical-value-of-data-attribute or https://stackoverflow.com/questions/14131008/how-to-sort-out-elements-by-their-value-in-data-attribute-using-js — Lety, Mar 07 '22 at 09:12
What is the exact output you're trying to create? The title and description ask two different things, and the description itself mentions values which don't appear in your demo HTML at all...? — Rory McCrossan, Mar 07 '22 at 09:17

Valeriu Ciuca · Accepted Answer · 2022-03-07T09:48:31.380

4

If you want to reorder the list using the input value inside the "li" you can try like this: (check the fiddle: https://jsfiddle.net/v1oskqg0/)

$(".btn").on("click", function() {
    $("#ItemList li").each(function(index) {
        var input_value = $(this).find('input').val();
        $(this).data('order', input_value);
    })
    $("#ItemList li")
      .sort((a,b) => $(a).data("order") - $(b).data("order"))
      .appendTo("#ItemList");
});

First, I stored the value from the input field into a data attribute on the li element and then I sorted the elements on btn click.

edited Mar 07 '22 at 09:48

answered Mar 07 '22 at 09:24

Valeriu Ciuca

2,084
11
14

Thanks. But, this works, but only for the first click. I need to reorder every click. I edited my question. – neves Mar 07 '22 at 09:28
I edited the answer and the fiddle. I just moved the .each() method inside on.("click") to repopulate the data order attribute on every click. – Valeriu Ciuca Mar 07 '22 at 09:32
But it's still working only the first click. I tried changing the code here, but it doesn't work. Just the first click. For example, after the first click I put the value 55555 in place of .54 but it stays in the same place after the click, instead of going to the last position. – neves Mar 07 '22 at 09:40
1

2 problems with fiddle: (1) if you *read* data-order using `data` then it won't be updated if you set with `attr` - so set/read with the same: `.data("order", val)` (2) `.attr("value")` is the initial value, not the current value: use `.val()` or `.prop("value")` updated fiddle:https://jsfiddle.net/z0ht6mvy/ – freedomn-m Mar 07 '22 at 09:43
@freedomn-m is right. My mistake .data("order", val) should be used. – Valeriu Ciuca Mar 07 '22 at 09:45

How to reorder a HTML list with jQuery after a button click?

1 Answers1

Linked