Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Изменение порядка элементов дерева (https://javascript.ru/forum/events/59276-izmenenie-poryadka-ehlementov-dereva.html)

Руднев 03.11.2015 21:48

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

Всем доброго времени суток. Осваиваю 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 не работает.


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

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

рони 03.11.2015 22:01

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

Руднев 03.11.2015 22:06

Цитата:

Сообщение от рони (Сообщение 394399)

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

Руднев 04.11.2015 00:02

Сам спросил, сам ответил. Надо всего лишь было записывать не массив объектов 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]);


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

рони 04.11.2015 00:30

Цитата:

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

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

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

Руднев 04.11.2015 00:43

Цитата:

Сообщение от рони (Сообщение 394422)
по ссылке выше было готовое решение :-?

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

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

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

рони 04.11.2015 01:11

Цитата:

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

это как?

Руднев 04.11.2015 01:26

Цитата:

Сообщение от рони (Сообщение 394428)
это как?

document.getElementsByClassName('item');


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

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

рони 04.11.2015 01:31

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

Руднев 04.11.2015 01:34

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


Часовой пояс GMT +3, время: 17:23.