Сгруппировать блоки по нумерации

328

03 февраля 2017, 06:32

Добрый день!

Есть 3 блока и у каждого есть свой номер, который может меняться (от 1 до 3) Грубо говоря это выглядит так:

var block1_number = 1;
var block1 = '<div>text</div>';
var block2_number = 3;
var block2 = '<div>text</div>';
var block3_number = 2;
var block3 = '<div>text</div>';

К примеру если у block3_number будет номер 1, то block3 он должен поменяться местами с block1

Можно делать так:

$.fn.swap = function(b){
        b = $(b)[0];
        var a = this[0],
            a2 = a.cloneNode(true),
            b2 = b.cloneNode(true),
            stack = this;
        a.parentNode.replaceChild(b2, a);
        b.parentNode.replaceChild(a2, b);
        stack[0] = a2;
        return this.pushStack( stack );
    };
if(block3_number < block1_number){
 $(block3).swap(block1);
}

Но получается нужно прописывать все условия, можно ли упростить задачу? Спасибо за внимание!

Answer 1

Имхо, лучше использовать массив и хранить позицию вместе с самим элементом:

var blocks = [{ 
  position: 1, 
  dom: $("<div>Block 1</div>") 
}, { 
  position: 4, 
  dom: $("<div>Block 4</div>") 
}, { 
  position: 3, 
  dom: $("<div>Block 3</div>") 
}, { 
  position: 2, 
  dom: $("<div>Block 2</div>") 
}]; 
 
function sort() { 
  blocks = blocks.sort(function(a, b) { 
    return a.position > b.position 
  }); 
  blocks.forEach(function(b) { 
    $("main").append(b.dom); 
  }); 
} 
// вставляем в исходном порядке 
blocks.forEach(function(b) { 
  $("main").append(b.dom); 
}); 
// сортируем и перевставляем 
setTimeout(sort, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<main></main>

Answer 2

var blocks_number = [1, 2, 3];
var blocks = ['<div>text</div>', '<div>text</div>', '<div>text</div>'];

И потом:

for (var i = 0, l = blocks_number.length; i < l; i++) {
    for (var j = blocks_number.length - 1, l = 0; i >= l; i--) {
        if (i === j)
         continue;
        if(blocks_number[j] < blocks_number[i]){
            $(block[j]).swap(blocks[i]);
    }
}

NB! Код только демонстрирует принцип. Возможны коллизии.

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

21:33

Виртуальный выделенный сервер (VDS) становится отличным выбором
22:26
22:40

Создание игр для детей: первые шаги в IT мире
08:34
15:01

Основные задачи SEO оптимизатора
17:01
11:24

Выделенный сервер для игр: преимущества и недостатки
10:16
17:54

Все вопросы

ТОП-10

Все популярные вопросы

Как добавить меню на свою карту?

Добрый деньКак можно добавить меню на свою карту Google JavaScript Maps API 3 Что бы каждый пользователь мог рисовать линию фронта,или же какую нибудь...

308

javascript