Изменение порядка элементов дерева
Уважаемые знатоки!
Всем доброго времени суток. Осваиваю 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 не работает. Готов к критике, но только объективной. Если подобные задачи уже были рассмотрены, ткните пальцем пожалуйста, где. Заранее спасибо. |
|
Цитата:
|
Сам спросил, сам ответил. Надо всего лишь было записывать не массив объектов 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 раз на страницу все хором. |
рони,
Ну да, ясно. Конечно глупо с моей стороны, но я пол дня потратил сегодня, что бы отыскать этот "способ". К вечеру видимо до меня доперло. Спасибо! |
Часовой пояс GMT +3, время: 17:23. |