Как поменять элементы местами в JQuery

Два примера, как поменять два блока местами и переместить содержимое между ними с помощью jQuery.

Пример 1: перемещение элементов

<div class="row">
	<div id="block-left">
		<span>Блок №1</span>
	</div>
	<div id="block-right">
		<span>Блок №2</span>
	</div>
</div>

<div class="button">
	<a href="#" id="button">Поменять местами</a>
</div>
HTML

Обработчик кнопки:

$('#button').click(function(){
	$('.row > div').each(function() {
		if ($(this).next()) {
			el = $(this).next();
		} else {
			el = $(this).prev();
		}

	 	var copy_from = $(this).clone(true);   
		$(el).replaceWith(copy_from);
		
		var copy_to = $(el).clone(true);        
		$(this).replaceWith(copy_to);
	});

	return false;
});
JS

Результат:

Пример 2: как поменять содержимое блоков местами

Такой прием может понадобится, если в вёрстке используется сетка и при смене элементов нужно менять только содержимое.

<div class="row">
	<div id="block-left">
		<span>Блок №1</span>
	</div>
	<div id="block-right">
		<span>Блок №2</span>
	</div>
</div>

<div class="button">
	<a href="#" id="button">Поменять местами</a>
</div>
HTML

Обработчик кнопки:

$('#button').click(function(){
	var left = $('#block-left > *');
	var right = $('#block-right > *');
	$('#block-left').append(right);
	$('#block-right').append(left);

	return false;
});
JS

Результат:

22.10.2020

Комментарии

, чтобы добавить комментарий.

Другие публикации

Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
8625
+12
Сборник методов jQuery для управления элементами DOM.
2648
+2
Пример горизонтального меню для лэндингов, в котором реализовано...
4834
+3
Отследить появление блока при скроллинге можно с помощью события onscroll, вычисляя его положение методами jquery...
12049
+7
Представленный код позволяет c помощью jQuery зафиксировать шапку таблицы при прокрутке страницы. Скрипт поддерживает...
15946
+1
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
8521
+4