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: stackoverflow.com/questions/69809178/… or this stackoverflow.com/questions/14160498/… or stackoverflow.com/questions/14131008/… — Lety
– Lety, Commented Mar 7, 2022 at 9: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
– Rory McCrossan, Commented Mar 7, 2022 at 9:17

Valeriu Ciuca · Accepted Answer · 2022-03-07 09:48:31Z

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 7, 2022 at 9:48

answered Mar 7, 2022 at 9:24

Valeriu Ciuca

2,10413 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

neves Over a year ago

Thanks. But, this works, but only for the first click. I need to reorder every click. I edited my question.

Valeriu Ciuca Over a year ago

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.

neves Over a year ago

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.

fdomn-m Over a year ago

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:jsfiddle.net/z0ht6mvy

Valeriu Ciuca Over a year ago

@freedomn-m is right. My mistake .data("order", val) should be used.

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related