Как выбрать и заменить элемент jQuery?

Question

[Anton Yatsenyuk]

Есть блок:

При клике на блок с цифрой всё остальное сдвигается вправо и появляются другие блоки для выбора.
У блоков с цифрами одинаковые классы, так как нужны одинаковые стили.



Как сделать так, чтобы при клике на любой из блоков с цифрой он становился на место первого блока, а первый - на его место и скрывался блок с остальными цифрами.
Работать должно так:
[2] (click) ---> [1] [3] [4]
[3] (click) ---> [3] [1] [2] [4] и потом блоки [1] [2] [4] прятались.

Код того, что есть сейчас: (Только показывается блок для выбора и остальной контент сдвигается)

var
	$rooms = $('.rooms'),
	$chooseBlock = $('#choise');

$rooms.on('click', function () {
	$('.state').animate({
		left: "+=360px"
	}, 1000);
	$('.range').animate({
		left: "+=360px"
	}, 1000);
	$('.action_button').animate({
		left: "+=360px"
	}, 1000);

	$chooseBlock.addClass('fadeInLeft').removeClass('hidden');
});

Comments

[Maksim Zverev]

Простите, а причем тут "У блоков с цифрами одинаковые классы, так как нужны одинаковые стили."

Answer 1

[Алексей Павлов]

<div class="container">
  <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>

$('.item').click(function(){
    $('.container .item:first-child').insertAfter(this);
    $(this).parent().prepend(this);
});

Вот этот код рабочий: jsfiddle.net/44R5R/2
Этот код ставит кликнутый элемент в начало списка блоков, а на его место ставит первый элемент.
Дальше я не понял, что делать надо с удалениями. Если нужно сделать, чтобы тот, по кому кликнули, стал первым - и единственным, то остальные нужно просто удалить.

Answer 2

[Виталий Киренков]

Я думаю, что вам нужно копать в сторону функций insertAfter (insertBefore) и append, prepend.

Кликнули. Потом эту кнопку делаете prepend в родительский блок. Соответственно все предыдущие оказываются справа.
А потом через nextAll($rooms).hide()

Как то так...