Добавление блока в блок по клику на jQuery

10.04.2018 11:22:47 am

Необходимость в каких то доработках появляется каждый день, сегодня понадобилось добавлять блок в блок по клику, сделать это надо на jQuery. Вот, что я понаписал (возможно, кому то пригодится):
Например, у нас такие блоки:

<div class="divParent">
    <div class="divChild"></div>
</div>
<div class="divParent">
    <div class="divChild"></div>
</div>
<div class="divParent">
    <div class="divChild"></div>
</div>

Блоки с классом "divChild" имеют такой стиль:

.divChild {
    width: 50px;
    height: 50px;
    display: inline-block;
    background: #C0C0C0;
}

Теперь сценарий, который будет добавлять блок в блок по клику:

var str = '<div class="divChild"></div>';
$('.divParent').click(function() {
	$(this).append(str);
});

Вот собственно и все. Однако может потребоваться ограничить количество добавляемых блоков, тут можно сделать проверку на допустимое количество блоков, если лимит не достигнут, то добавляем блок, если достигнут, то выводим сообщение ошибки. Допустим, лимит добавляемых блоков = 5:

var str = '<div class="divChild"></div>';
$('.divParent').click(function() {
	var divChildCount = $(this).children('.divChild').length; // Получение количества дочерных блоков
	if (divChildCount >= 5) { // Проверка: достигнут лимит или нет
		// Если лимит достигнут, выводим сообщение
		alert('Достигнут лимит добавляемых блоков.');
	}
	else {
		// Если не достигнут: добавляем блок
		$(this).append(str);
	};
});

Вот, пока все.

Жалоба

10.04.2018 08:46:16 pm

Добавлять блоки может потребоваться не по классу, а по идентификатору, который, как правило уникален. Идентификатор может, например, начинаться со строки divParent, дальше нижнее подчеркивание и номер блока. Пример:

<div id="divParent_1">
    <div class="divChild"></div>
</div>
<div id="divParent_2">
    <div class="divChild"></div>
</div>
<div id="divParent_3">
    <div class="divChild"></div>
</div>

А если нам известен начальный кусок идентификатора, то мы можем использовать селектор по началу атрибута. Для этого надо заменить в коде из первого сообщения:

$('.divParent')

На:

$('[id ^= divParent]')

И все. Код целиком:

var str = '<div class="divChild"></div>';
$('[id ^= divParent]').click(function() {
	var divChildCount = $(this).children('.divChild').length;
	if (divChildCount >= 5) {
		alert('Достигнут лимит добавляемых блоков.');
	}
	else {
		$(this).append(str);
	};
});

Жалоба