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);

Select the elements, and then sort them? What have you tried so far? — evolutionxbox
– evolutionxbox, Commented May 31, 2020 at 11:41

Swati · Accepted Answer · 2020-05-31 12:38:41Z

1

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>

answered May 31, 2020 at 12:38

Swati

28.5k4 gold badges26 silver badges45 bronze badges

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

1 Comment

abms Over a year ago

This is simple code and worked like a charm. Thank you so much for your help.

Cal Courtney · Accepted Answer · 2020-05-31 12:10:39Z

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/!

Aditya Dwivedi · Accepted Answer · 2020-05-31 14:17:45Z

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

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

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related