1

I have this html structure

<div class="main">
    <div class="column-1">
        <div class="box" id="box-1"></div>
        <div class="box" id="box-2"></div>
        <div class="box" id="box-3"></div>
    </div>
    <div class="column-2">
        <div class="box" id="box-4"></div>
        <div class="box" id="box-5"></div>
        <div class="box" id="box-6"></div>
    </div>
</div>

And I have two arrays of numbers

arr1 = [2, 4, 3]
arr2 = [1, 5, 6]

I would like to re-position .box divs to given position.

I found a similar question here, but that only works with single column

var wrapper = jQuery('.column-1'), 
    items = wrapper.children('.box'),
    arr = [2,1,0];
wrapper.append( jQuery.map(arr, function(v){ return items[v] }) );

I can't figure out how to do this, with jquery or javascript!

Expected output is

<div class="main">
    <div class="column-1">
        <div class="box" id="box-2"></div>
        <div class="box" id="box-4"></div>
        <div class="box" id="box-3"></div>
    </div>
    <div class="column-2">
        <div class="box" id="box-1"></div>
        <div class="box" id="box-5"></div>
        <div class="box" id="box-6"></div>
    </div>
</div>
Arman Khan
  • 25
  • 4

2 Answers2

0

Given that you found code that works for one column, it looks like you're almost there! You can slightly tweak the answer from the other question you linked by creating a function:

reorderElements(parent, arr) {
    const wrapper = jQuery(parent);
    const items = wrapper.children('.box');
    wrapper.append(
        jQuery.map(arr, function(value) { return items[value] })
    );
}

const arr1 = [2, 4, 3]
const arr2 = [1, 5, 6]
reorderElements('.column-1', arr1);
reorderElements('.column-2', arr2);

I've also updated the code to use const and semi-colons.

What do you think? Does that code do what you expect?

Yves Gurcan
  • 1,096
  • 1
  • 10
  • 25
  • Hey, thanks for the answer, but I tested it on my elements and it's not sorting them! Have you tested this with my snippet? – Arman Khan Nov 21 '19 at 06:28
0

Ah, yes, my bad! First of all, I forgot to add function in front of reorderElements. Second, I didn't realize that the values in the two arrays could be in either column. This makes things a little bit more complex, but we can rely on jQuery's magic to get to our goal.

I've tested the following snippet and it seems to do what you expect:

function findElement(parent, number) {
  return parent.find('#box-' + number);
}

function reorderElements() {
    const arr1 = [2, 4, 3];
    const arr2 = [1, 5, 6];
    const col1 = jQuery('.column-1');
    const col2 = jQuery('.column-2');
    col1.append(
        arr1.map(function(value) {
          const col1Elem = findElement(col1, value);
          const col2Elem = findElement(col2, value);
          return col1Elem[0] || col2Elem[0];
        })
    );
    col2.append(
        arr2.map(function(value) {
          const col1Elem = findElement(col1, value);
          const col2Elem = findElement(col2, value);
          return col1Elem[0] || col2Elem[0];
        })
    );
}

reorderElements();

This code can most definitively optimized, but it does the job!

You can run the code live on CodePen: https://codepen.io/yvesgurcan/pen/gOOEvxr.

Yves Gurcan
  • 1,096
  • 1
  • 10
  • 25