jQuery: не получается вырезать и вставить элемент во второй раз

#javascript #jquery

Дано: контейнер с тремя элементами. Задача: взять первый элемент и переместить его
в конец контейнера (будет последовательность 2, 3, 1), затем сделать ещё раз то же
самое для ставшего первым элемента (будет в результате 3, 1, 2).



В приведённом ниже решении первый раз всё срабатывает успешно:

$container.append($allElements.first());


Если дублировать эту строку и выполнить код, то перемещения до последовательности
(3, 1, 2) уже не произойдёт. Возможно, я неправильно понял ранее изученное, но вроде
как jQuery-объект меняет своё состояние, когда происходят какие-то изменения с соответствующими
ему элементами DOM.

Пытаюсь снова сделать выборку вместо уже имеющегося объекта $container:

$('.container').append($allElements.first()); 


Тоже ничего не происходит. Объясните, пожалуйста, причины этого.

P. S. Можно решить поставленную задачу через замысловатые условия и арифметические
операции, но стремясь к простоте кода, хотелось бы работать только в первым элементом
$allElements.first() (в каждой итерации).



let $container = $('.container');
let $allElements = $('.element');

$container.append($allElements.first());
//$container.append($allElements.first()); // не работает
//$('.container').append($allElements.first()); // так тоже
.container {
  display: inline-block;
  background: rgba(255, 0, 0, 0.25);
  line-height: 1;
}

.element {
  display: inline-block;
  width: 100px;
  height: 100px;
}
.element-first {
  background: rgba(255, 255, 0, 0.25);
}
.element-second {
  background: rgba(0, 128, 0, 0.25);
}
.element-third {
  background: rgba(0, 0, 255, 0.25);
}


  
1
  
2
  
3




    

Ответы

Ответ 1

Коллекция в jQuery - это НЕ живая коллекция, поэтому, пока руками ее не модифицируешь,
в ней ничего не поменяется.

Поэтому в твоем коде ты постоянно добавляешь один и тот же элемент.

В качестве решения в лоб, можно просто заново получать все элементы, хотя на самом
деле, тебе нужен только первый.

Например так:



let $container = $('.container');

$container.append($('.element:first-child'));
$container.append($('.element:first-child'));
.container {
  display: inline-block;
  background: rgba(255, 0, 0, 0.25);
  line-height: 1;
}

.element {
  display: inline-block;
  width: 100px;
  height: 100px;
}

.element-first {
  background: rgba(255, 255, 0, 0.25);
}

.element-second {
  background: rgba(0, 128, 0, 0.25);
}

.element-third {
  background: rgba(0, 0, 255, 0.25);
}


  
1
  
2
  
3



Ответ 2

Эта запись 

let $allElements = $('.element');


один раз взяла последовательность и всегда при вызове

$allElements.first()


возвращает ссылку на один и тот же, попробуй так

let $container = $('.container');
$container.append($('.element').first());
$container.append($('.element').first());


Ответ 3

Нужно ещё раз сделать выборку. Ибо когда ты сделал выборку первый раз у тебя всё
и записалось как в первый раз - тобишь изменений в переменной $allElements не произошло.



let $container = $('.container');
let $allElements = $('.element');

$container.append($allElements.first());
$container.append($('.element').first()); // уже работает
//$('.container').append($allElements.first()); // так тоже
.container {
  display: inline-block;
  background: rgba(255, 0, 0, 0.25);
  line-height: 1;
}

.element {
  display: inline-block;
  width: 100px;
  height: 100px;
}
.element-first {
  background: rgba(255, 255, 0, 0.25);
}
.element-second {
  background: rgba(0, 128, 0, 0.25);
}
.element-third {
  background: rgba(0, 0, 255, 0.25);
}


  
1
  
2
  
3