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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$('p').remove();
JS

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

$('div').detach();
JS

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

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

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

$('p').empty();
JS

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

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

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

$('p').unwrap();
JS

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

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

$('strong').contents().unwrap();
$('i').contents().unwrap();
$('p').contents().unwrap();
JS
28.01.2020
14429
Следующая запись Стилизация кнопок CSS

Комментарии 1

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

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

Получение данных из тегов c помощью jQuery
Как получить содержимое тегов и атрибутов с помощью методов jQuery.
7775
+2
Работа с Radio Button в JQuery
Сборник приемов работы с радиокнопками в JQuery. Рассмотрим на примере группы контролов с одинаковым name=radio.
62428
+9
Работа с checkbox в JQuery
Сборник приемов JQuery для работы с чекбоксом.
204730
+13
Работа с Input Text jQuery
Сборник приемов JQuery для работы с текстовыми полями. Во всех примерах используется следующий html код...
103004
+17
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
30307
+31
Работа с select с помощью JQuery
Сборник методов JQuery для работы с выпадающими списками select option с примерами.
188135
+13