Манипуляции с элементами jQuery

28.01.2020

25036

Сборник методов jQuery для управления элементами DOM.

Проверка

Проверить элементы на наличие, заполненность можно с помощью следующих способов:

Проверка наличия элемента:

if ($('.element').length) {
	alert('.element существует');	
}

Пустой или нет:

if ($('.element').is(':empty')) {
	alert('.element пуст');	
}

if ('.element:not(:empty)') {
	alert('.element не пустой');	
}

Проверка элементов до и после

Комбинацией методов prev(), next() и is() можно узнать о предыдущем и последующим элемент в общем родителе.

Перед элементом:

if ($('.element').prev().is('div')) {
	alert('Перед .element есть div');
}

if ($('.element').prev().is(':empty')) {
	alert('Перед .element есть пустой элемент');
}

После элемента:

if ($('.element').next().is('div')) {
	alert('После .element есть div');
}

if ($('.element').next().is(':empty')) {
	alert('После .element есть пустой элемент');
}

Добавление

Вставить перед элементом:

$('ul').before('<p>Новый параграф</p>');

/* или */
$('<p>Новый параграф</p>').insertBefore('ul');

Вставить после элемента:

$('ul').after('<p>Новый параграф</p>');

/* или */
$('<p>Новый параграф</p>').insertAfter('ul');

Пример работы before и after:

Далее, селектором :eq(n) можно добавить контент у порядкового элемента.

Добавить до n-го элемента:

$('ul:eq(1)').before('<p>Новый параграф</p>');

Добавить после n-го элемента:

$('ul:eq(1)').after('<p>Новый параграф</p>');

Добавить в начало элемента:

$('ul').prepend('<li>Пункт 0.</li>');

/* или */
$('<li>Пункт 0.</li>').prependTo('ul');

Добавить в конец элемента:

$('ul').append('<li>Пункт x.</li>');

/* или */
$('<li>Пункт x.</li>').appendTo('ul');

Пример работы prepend и append:

Оборачивание

Обернуть элемент снаружи

wrap() – оборачивает каждый выбранный элемент в указанную обертку.

$('ul').wrap('<div class="new"></div>');

/* или */
$('ul').wrap('<div class="new" />');

Пример работы wrap:

Ещё один пример оборачивает все изображения ссылками:

$('img').each(function(){
	$(this).wrap('<a href="' + this.src + '"></a>');
});

Обернуть несколько элементов одним

$('p').wrapAll('<div class="new"></div>');

/* или */
$('p').wrapAll('<div class="new" />');

/* Так-же можно указать список элементов */
$('.class1, .class2, .class3').wrapAll('<div class="new" />');

Пример работы wrapAll:

Обернуть содержимое элемента

$('.element').wrapInner('<article></article>');

/* или */
$('.element').wrapInner('<article/>');

Пример работы wrapInner:

Замена

Методы replaceWith() или replaceAll() заменяют элемент другим элементом, включая его содержимое.

$('div').replaceWith('<p>123</p>');

/* или */
$('<p>123</p>').replaceAll('div');

Если нужно заменить тег, но оставить его содержимое:

$('.element').replaceWith('<p>' + $('.element').html() + '</p>');

/* или */
$('<p>' + $('.element').html() + '</p>').replaceAll('.element');

Если нужно сохранить все атрибуты старого тега и содержимое:

$('#element').replaceWith(function(){
	$new = $('<p>', {html: $(this).html()});
	$.each(this.attributes, function(i, attribute){
		$new.attr(attribute.name, attribute.value);
	});
	return $new;
});

Клонирование

.clone(withDataAndEvents, deepWithDataAndEvents) – создает копию элемента, если в параметре withDataAndEvents указать true, то так-же скопируются все данные и обработчики элемента. Параметр deepWithDataAndEvents отвечает за копирование обработчиков у дочерних элементов, по умолчанию равен withDataAndEvents.

 var new_element = $('.element').clone(true);
 $('body').append(new_element);

Пример работы clone:

Удаление

Метод remove() удаляет элемент полностью, включая повешенные на него события и освобождает память.

Удалить элемент с содержимым:

$('p').remove();

Метод detach() как бы скрывает элемент, поэтому если повторно добавить этот элемент в DOM, он сохранит все события и свойства.

$('div').detach();

Пример работы remove:

Удалить содержимое

Метод empty() удаляет всё содержимое элемента, включая дочерние элементы и их обработчики событий.

$('p').empty();

Пример работы empty:

Удалить родительский элемент

unwrap() удаляет родительские элементы из набора, оставляя их содержимое на своих местах.

$('p').unwrap();

Пример работы unwrap:

Удалить элемент, но оставить содержимое

$('strong').contents().unwrap();
$('i').contents().unwrap();
$('p').contents().unwrap();