Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.11.2015, 21:48
Интересующийся
Отправить личное сообщение для Руднев Посмотреть профиль Найти все сообщения от Руднев
 
Регистрация: 03.11.2015
Сообщений: 11

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

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


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

Заранее спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 03.11.2015, 22:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

Руднев,
Сортировка DIV на "чистом" JavaScript
Ответить с цитированием
  #3 (permalink)  
Старый 03.11.2015, 22:06
Интересующийся
Отправить личное сообщение для Руднев Посмотреть профиль Найти все сообщения от Руднев
 
Регистрация: 03.11.2015
Сообщений: 11

Сообщение от рони Посмотреть сообщение
Руднев,
Сортировка DIV на "чистом" JavaScript
Спасибо большое.
Ответить с цитированием
  #4 (permalink)  
Старый 04.11.2015, 00:02
Интересующийся
Отправить личное сообщение для Руднев Посмотреть профиль Найти все сообщения от Руднев
 
Регистрация: 03.11.2015
Сообщений: 11

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


Этот код записывает сгенерированный порядок.
Ответить с цитированием
  #5 (permalink)  
Старый 04.11.2015, 00:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

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

у вас перебор с применением for in вместо простого for или современного forEach
Ответить с цитированием
  #6 (permalink)  
Старый 04.11.2015, 00:43
Интересующийся
Отправить личное сообщение для Руднев Посмотреть профиль Найти все сообщения от Руднев
 
Регистрация: 03.11.2015
Сообщений: 11

Сообщение от рони Посмотреть сообщение
по ссылке выше было готовое решение

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

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

Последний раз редактировалось Руднев, 04.11.2015 в 00:48.
Ответить с цитированием
  #7 (permalink)  
Старый 04.11.2015, 01:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

Сообщение от Руднев
который может записать коллекцию элементов?
это как?
Ответить с цитированием
  #8 (permalink)  
Старый 04.11.2015, 01:26
Интересующийся
Отправить личное сообщение для Руднев Посмотреть профиль Найти все сообщения от Руднев
 
Регистрация: 03.11.2015
Сообщений: 11

Сообщение от рони Посмотреть сообщение
это как?
document.getElementsByClassName('item');


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

Я может бред больного несу, вы меня остановите, если я перебарщивать начну)
Ответить с цитированием
  #9 (permalink)  
Старый 04.11.2015, 01:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

Руднев,
нет только циклом каждый элемент - можно только вставлять предварительно в DocumentFragment, чтоб потом 1 раз на страницу все хором.
Ответить с цитированием
  #10 (permalink)  
Старый 04.11.2015, 01:34
Интересующийся
Отправить личное сообщение для Руднев Посмотреть профиль Найти все сообщения от Руднев
 
Регистрация: 03.11.2015
Сообщений: 11

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Псевдо-toggle и изменение порядка расположения элементов по клику zeppeline jQuery 2 14.04.2014 14:37
Изменение порядка расположения элементов Sergeizd Элементы интерфейса 3 27.10.2013 20:28
запретить изменение количество элементов в списке Antistas jQuery 0 05.12.2012 14:05
Как получить значения вышестоящих элементов дерева TreeStore ? Allan Stark ExtJS 1 31.07.2012 16:48
Изменение множества элементов Input по определённом призна Лавсановые Волокна Элементы интерфейса 1 24.12.2010 10:37