Дано: контейнер с тремя элементами. Задача: взять первый элемент и переместить его в конец контейнера (будет последовательность 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);
}
Ответ
Коллекция в 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);
}
Комментариев нет:
Отправить комментарий