How to order html elements in the same order as array using jQuery?

Question

I'd like to order html elements in the same order as arrayData.

JavaScript

    var arrayData = [59, 56, 57];

HTML

    <div class="selectize-input">
        <div class="item" data-value="56">Dog</div>
        <div class="item" data-value="57">Rabbit</div>
        <div class="item" data-value="59">Cat</div>
    </div>

I want the result like this.

    <div class="selectize-input">
        <div class="item" data-value="59">Cat</div>
        <div class="item" data-value="56">Dog</div>
        <div class="item" data-value="57">Rabbit</div>
    </div>

Is there any good way to achive this? Thank you in advance.

[Additional] I want to get result something like this, but don't now how to apply it to html elements and render on browser.

const orderRule = ['Cat', 'Rabbit', 'Dog', 'Pig', 'Mouse'],
      array = ['Mouse','Rabbit', 'Pig', 'Dog', 'Cat'];

const sortArray = [...array].sort((a, b) => orderRule.indexOf(a) - orderRule.indexOf(b));
console.log(sortArray);

Answer 1

So, I'm not quite sure if I fully understand the question. But if you're trying to dynamically render a div for each piece of data, you could try something like...

JS:

const arrayData = [
    {value:59, title:"Cat"},
    {value:56, title:"Dog"},
    {...}
]

arrayData.forEach((dataObject) => {
    $('.selectize-input').append(
        document.createElement('div')
            .innerHTML(dataObj.title)
            .attr('data-value', dataObj.value)
            .addClass('item')
    )          
}

I'm not really a jQuery person, so I'm not entirely sure that this will work, but I believe it will send you in the right direction.

First, I am making your array into an array of objects which include both the value of the item, but also the title of the item.

Then, I am using a forEach loop to run through each item and create a new div based on it. It appends these divs to the .selectize-input .

I hope it helps you.

I should say, the stuff that you're doing here is something that ReactJS is really good at. It's like a souped-up javascript that allows you to create and manipulate HTML elements really easily.

Check it out at https://reactjs.org/ !

Answer 2

You can loop over your array using $.each and then use append to add div at particular position.

Here is demo code:

 var arrayData = [59, 56, 57]; //looping through array $.each(arrayData, function() { //append div at particular positon using data-value $(".selectize-input").append($("div [data-value=" + this + "]")); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="selectize-input"> <div class="item" data-value="56">Dog</div> <div class="item" data-value="57">Rabbit</div> <div class="item" data-value="59">Cat</div> </div>

Answer 3

1. If you only have the parent element in html and want to add the child div in sorted order then:

   const divList = [ {value:59, title:"Cat"}, {value:56, title:"Dog"} ]

    divList.forEach((obj) => { $("<div />").html(obj.title).attr('data-value', obj.value).addClass('item').appendTo( $('.selectize-input'))

   })

Codepen: https://codepen.io/AdityaDwivedi/pen/pojMYRr

2. If you already have the div element added in your html & you want to sort them up:

   <div class="selectize-input"> <div class="item" data-value="56" id="56">Dog</div> <div class="item" data-value="57" id="57">Rabbit</div> <div class="item" data-value="59" id="59">Cat</div> </div>

`

const divOrder = ["59", "56", "57"]
    const orderedDiv = $('.selectize-input > div').sort((a, b) =>
    divOrder.indexOf(a.id) - divOrder.indexOf(b.id)
    ); 



  $('.selectize-input').empty()

orderedDiv.map((obj) =>{
  $("<div />")
            .html(orderedDiv[obj].innerHTML)
            .attr('data-value', orderedDiv[obj].value)
            .appendTo( $('.selectize-input'))})

`

Codepen: https://codepen.io/AdityaDwivedi/pen/QWjeopv?editors=1111