How to change array order javascript array

Question

How to change array order javascript array

Navigation

#1 by (2 votes)

0

How do I change an array order. Example: I have an array with the following syntax: arr = [h5, ul, h5, ul, h5, ul, h5, ul,]; The purpose is to change the display order of the html, for example h5 beer / h5 with its respective ul is first exported. I need a syntax in which I can change the order freely see:

jQuery

$(document).ready(function(){
var elems = $(".departamento h5, .departamento ul");
var move = jQuery.makeArray( elems ); 

Array.prototype.move = function (old_index, new_index) {
  if (new_index >= this.length) {
    var k = new_index - this.length;
    while ((k--) + 1) {
        this.push(undefined);
    }
  }
  this.splice(new_index, 0, this.splice(old_index, 1)[0]);
  return this;
};    
$( move ).appendTo( ".departamento" );    

});

HTML

<div class="departamento">
    <h5>vinho</h5>
    <ul>
        <li>vinho tinto</li>
    </ul>
    <h5>cerveja</h5>
    <ul>
        <li>cerveja sem alcool</li>
    </ul>
    <h5>licor</h5>
    <ul>
        <li>licor vermelho</li>
    </ul>
    <h5>cafe</h5>
    <ul>
        <li>cafeina</li>
    </ul>
</div>

javascript html jquery

asked by anonymous 11.05.2015 / 02:29

1 answer

Display Carousel after loading For x in range (y) does not return right

score 2 · Answer 1

According to this answer, link

, you can use this code:

Array.prototype.move = function (old_index, new_index) {
  if (new_index >= this.length) {
    var k = new_index - this.length;
    while ((k--) + 1) {
        this.push(undefined);
    }
  }
  this.splice(new_index, 0, this.splice(old_index, 1)[0]);
};

In this way, the code to use the above method would be:

[1, 2, 3].move(0, 1) # retorna [2, 1, 3]

If you want to return a copy, and do not modify the original array, change the "splice" to "slice" in the last line.

UPDATE

Instead of creating this method moves in the base domain class Array of the entire javascript, you can implement the method only in your array.

In this case, we would have a method to change the order of your array with the elements, and another to render the new format, ie change the DOM when the reordering is done. With this, I wrote two methods:

$(document).ready(function(){
    var elems = $(".departamento h5, .departamento ul");

    elems.changeOrder = function (old_index, new_index) {
      if (new_index >= this.length) {
        var k = new_index - this.length;
        while ((k--) + 1) {
            this.push(undefined);
        }
      }
      this.splice(new_index, 0, this.splice(old_index, 1)[0]);
    };

    elems.reflux = function(){
        var newListOfElements = this.clone();
        var oldListOfElements = $(this.selector);
        for(var i=0; i < newListOfElements.length; i++){
            $(newListOfElements[i]).insertAfter(oldListOfElements[i]);
        }
        $(oldListOfElements).remove();
    }

    elems.changeOrder(2, 0); // [2] == Titulo Cerveja vai para [0]
    elems.changeOrder(3, 1); // [3] == Lista de cervejas vai para [1]

    elems.reflux(); // Após trocar a ordem, refaz o DOM de acordo com a ordem;
});

The first, #changeOrder, is a method that contains the same Array # code moves up. The second is the #reflux () method. Basically, it inserts new clone elements on the screen considering the new ordering and then deletes the old elements, from the old ordering.

I put the code here: link

UPDATE 2

In fact, a more optimized code for the #reflux method would look like this:

    elems.reflux = function(){
        var oldListOfElements = $(this.selector),
        newListOfElements = this.clone();
        $(newListOfElements).insertAfter(oldListOfElements.last());
        $(oldListOfElements).remove();
    }

Here's how to use it: link