How to convert the order of <li> in an unordered list into a JavaScript Array?

Question

I have this unordered list which can be arranged by the user:

      <ul id="sortable1" class="connectedSortable">
          <li id="1" class="ui-state-default">A</li>
          <li id="2" class="ui-state-default">B</li>
          <li id="3" class="ui-state-default">C</li>
          <li id="4" class="ui-state-default">D</li>
          <li id="5" class="ui-state-default">E</li>
      </ul>

I wanted to make a Javascript array based on the arrangement for example if the order is ADBEC then the array should be [1, 4, 2, 5, 3]

An ID has been set for each <li> as an individual identifier.

Please note this refers to the orders of list items not the contents. All help appreciated thanks!

IT goldman · Accepted Answer · 2022-11-08 22:27:30Z

4

the order is guaranteed to be from top to bottom, so:

document.querySelectorAll("#sortable1 li").forEach(function(li) {
  console.log(li.id)
})

<ul id="sortable1" class="connectedSortable">
  <li id="1" class="ui-state-default">A</li>
  <li id="2" class="ui-state-default">B</li>
  <li id="3" class="ui-state-default">C</li>
  <li id="4" class="ui-state-default">D</li>
  <li id="5" class="ui-state-default">E</li>
</ul>

answered Nov 8, 2022 at 22:27

IT goldman

20.4k2 gold badges18 silver badges34 bronze badges

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

1 Comment

tacoshy Over a year ago

it should be noted that querySelectorAll returns a Node List not an Array

imvain2 · Accepted Answer · 2022-11-08 22:38:48Z

3

You can use querySelectorAll to loop through each li and push the id to an array.

let sortable1 = document.querySelectorAll("#sortable1 li"),arry = [];

sortable1.forEach((e)=> arry.push(e.id))

console.log(arry)

<ul id="sortable1" class="connectedSortable">
          <li id="2" class="ui-state-default">B</li>
          <li id="1" class="ui-state-default">A</li>
          
          <li id="3" class="ui-state-default">C</li>
          <li id="4" class="ui-state-default">D</li>
          <li id="5" class="ui-state-default">E</li>
      </ul>

edited Nov 8, 2022 at 22:38

answered Nov 8, 2022 at 22:27

imvain2

15.9k1 gold badge19 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to convert the order of <li> in an unordered list into a JavaScript Array?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related