How can I move a list item to the top on click?

Question

If I click on a specific list item then it will goes to up in the list. For example if i click on Price list it show above of the color list.

function setOnTop() {
  var listItems = document.querySelector("li");
  for (var i = 0; i < listItems.length; i++) {
    listItems[$i].addEventListener("click", function() {
      //Move on top
    });
  }
}

<ul>
  <li>Color</li>
  <li>Size</li>
  <li>Price</li>
</ul>

Possible duplicate - https://stackoverflow.com/questions/41762496/how-can-i-change-the-order-of-lis-in-a-list-when-i-press-a-button-with-js-wi — Nikolay, Jan 27 '23 at 06:40
@Nikolay that question and way is different and its is the different from that, you can check again. its not by click on button. — user3631206, Jan 27 '23 at 10:50

score 2 · Answer 1 · edited Jan 27 '23 at 17:37

2

const ul = document.querySelector("ul");
const li = ul.querySelectorAll("li");

function setTop() {
  ul.prepend(this);
}
li.forEach((el) => {
  el.addEventListener("click", setTop);
});

<ul>
  <li>Color</li>
  <li>Size</li>
  <li>Price</li>
</ul>

edited Jan 27 '23 at 17:37

isherwood

58,414
16
114
157

answered Jan 27 '23 at 06:46

bluestar0505

338
1
14

when you prepend the li why doesn't it add to the list of li(s) instead of moving the li from one place to another? – DCR Jan 27 '23 at 18:00

How can I move a list item to the top on click?

1 Answers1