0

Como faço para mudar uma ordem de array. Exemplo: Possuo um array com seguinte sintaxe: arr = [h5,ul,h5,ul,h5,ul,h5,ul,]; A finalidade é mudar a ordem de exibição do html, por exemplo o h5 cerveja /h5 com sua respectiva ul seja exbida primeiro. Preciso de uma sintaxe em que eu possa mudar a ordem livremente veja:

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>
2
  • Só pra entender melhor, de onde vem essa array? Você quer criar a array manualmente e fazer o HTML respeitar a ordem dela?
    – bfavaretto
    11/05/2015 às 2:03
  • Eu quero manipular o html existente, transformando o mesmo em array, através do array mudar a posição dos elementos
    – leodario
    11/05/2015 às 2:32

1 Resposta 1

2

De acordo com esta resposta, https://stackoverflow.com/questions/5306680/move-an-array-element-from-one-array-position-to-another, você pode usar este código:

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

Desta forma, o código para usar o método acima ficaria:

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

Se você quiser retornar uma cópia, e não modificar o array original, troca na última linha o "splice" por "slice".


UPDATE

Ao invés de criar este método move na classe de domínio base Array de todo o javascript, você pode implementar o método somente no seu array.

Neste caso, teríamos um método para alterar a ordem do seu array com os elementos, e outro para renderizar o novo formato, ou seja, alterar o DOM quando a reordenação estiver feita. Com isso, escrevi dois métodos:

$(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;
});

O primeiro, #changeOrder, é um método que contém o mesmo código do Array#move acima. O segundo é o método #reflux(). Basicamente, ele insere novos elementos clones na tela considerando a nova ordenação e depois apaga os elementos velhos, da ordenação antiga.

Coloquei o código aqui: http://jsfiddle.net/rkzs8teg/2/

UPDATE 2

Na verdade, um código mais otimizado para o método #reflux seria assim:

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

Segue a utilização dele: http://jsfiddle.net/rkzs8teg/3/

4
  • Ainda não consegui. Dá uma olhada o que fiz de errado. jsfiddle.net/rkzs8teg
    – leodario
    11/05/2015 às 12:24
  • Esse código vai modificar a array, mas não o DOM, que ele quer que seja afetado.
    – bfavaretto
    11/05/2015 às 12:34
  • E existe alguma forma de modificar o DOM através de array?
    – leodario
    11/05/2015 às 13:09
  • Atualizei o post, dá uma olhada no UPDATE
    – rafaels88
    13/05/2015 às 23:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .