Изменение порядка элементов дерева
 

Уважаемые знатоки!

Всем доброго времени суток. Осваиваю JavaScript, с основами все вроде ничего. Сейчас мучаю DOM. В процессе обучения столкнулся вот с каким вопросом. Можно ли поменять местами ноды в родительском элементе, т.е. что бы элементы item у родителя wrap меняли свое расположение.

В HTML:

враппер, где лежат несколько элементов:

<div class="wrap">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

и есть кнопка, по нажатию которой будет происходить сие действие:

<form action="">
            <button value="Start" class="start-btn">Старт</button>
</form>

В Js:


Получаем кнопку и все item(ы).

var btnStart = document.querySelector(".start-btn")
var items = document.getElementsByClassName('item');

Далее инициализируем массив, куда положим потом наши item(ы)

var itemsArr = [];

Теперь пробегаемся по нашему объекту items и кладем все значения в массив.

for (var data in items) {
        if (!items.hasOwnProperty(data)) continue
        itemsArr.push(items[data]);
}

Теперь напишем наш шафл, который будет менять местами item(ы)

function shuffle(itemsArr) {
        itemsArr.sort(function () {
            return 0.5 - Math.random()
        })
}

И теперь по клику у нас должна генериться новая сетка.

btnStart.addEventListener("click", function (event) {
        console.log("Поменял!");
        event.preventDefault();
        shuffle(itemsArr);

        А как в HTML это запихнуть?

});

Если посмотреть в консоль, itemsArr меняет свой порядок при клике, НО, как это отрисовать в HTML?

appendChild не работает.


Готов к критике, но только объективной. Если подобные задачи уже были рассмотрены, ткните пальцем пожалуйста, где.

Заранее спасибо.

Руднев,
http://javascript.ru/forum/dom-windo...tml#post392060

Спасибо большое.

Сам спросил, сам ответил. Надо всего лишь было записывать не массив объектов itemsArr, а перебрать его, и записывать каждую ячейку.


Вот функция shuffle:

btnStart.addEventListener("click", function (event) {
        console.log("Поменял!");
        event.preventDefault();
        shuffle(itemsArr);
        for(var data in itemsArr){
            wrap.appendChild(itemsArr[data]);
        }
    });

for(var data in itemsArr){
            wrap.appendChild(itemsArr[data]);

Этот код записывает сгенерированный порядок.

по ссылке выше было готовое решение :-?

у вас перебор с применением for in вместо простого for или современного forEach

Да, вы абсолютно правы. Решение было, НО, не мое. Мое кривое, но мое, если вы понимаете, о чем я.
На счет циклов согласен с вами, но это лишь проверка работоспособности кода. Вот сейчас, когда код работает, его можно оптимизировать и привести в божеский вид.
Меня учили так "Сначала сделай, чтоб работало, а потом красоту наводи". )) Но на вкус, как говорится, все фломастеры разные.

Рони, скажите пожалуйста, есть способ, который может записать коллекцию элементов?

это как?

document.getElementsByClassName('item');

ту коллекцию, которую вернет этот метод сразу же записать в html.

Я может бред больного несу, вы меня остановите, если я перебарщивать начну)

Руднев,
нет только циклом каждый элемент - можно только вставлять предварительно в DocumentFragment, чтоб потом 1 раз на страницу все хором.

рони,
Ну да, ясно. Конечно глупо с моей стороны, но я пол дня потратил сегодня, что бы отыскать этот "способ". К вечеру видимо до меня доперло. Спасибо!