Главная страница   /   11.2. Добавление дополнительной цветочной продукции (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

11.2. Добавление дополнительной цветочной продукции

Первое изменение, которое я сделаю, это добавлю в магазин дополнительную цветочную продукцию. Я хочу сделать это, чтобы показать, как можно создавать элементы в цикле и потому что дополнительная информация пригодится в дальнейшем в этой главе. В листинге 11-2 показан элемент script с добавлениями.

Листинг 11-2: Добавление на страницу новой продукции
<script type="text/javascript">
	$(document).ready(function () {
		var fNames = ["Carnation", "Lily", "Orchid"];
		var fRow = $('<div id=row3 class=drow/>').appendTo('div.dtable');
		var fTemplate = $('<div class=dcell><img/><label/><input/></div>');
		for (var i = 0; i < fNames.length; i++) {
			fTemplate.clone().appendTo(fRow).children()
				.filter('img').attr('src', fNames[i] + ".png").end()
				.filter('label').attr('for', fNames[i]).text(fNames[i]).end()
				.filter('input').attr({ name: fNames[i], value: 0, required: "required" })
		}
	});
</script>

Я определил три дополнительных типа цветов (Carnation, Lily и Orchid) и создал новый элемент div, которому был присвоен классу drow и который я присоединил к существующему элементу div, исполняющему роль таблицы в модели табличной верстки CSS:

var fNames = ["Carnation", "Lily", "Orchid"];
var fRow = $('<div id=row3 class=drow/>').appendTo('div.dtable');

Затем я определил скелет набора элементов; он описывает структуру элементов, которую я хочу иметь для каждого продукта, но не содержит никаких атрибутов, которые могут различить один цветок от другого:

var fTemplate = $('<div class=dcell><img/><label/><input/></div>');

Я рассматриваю скелетную структуру элементов в качестве простого шаблона, клонируя ее для каждого из цветов, который я хочу добавить, и используя имя цветка, чтобы добавить атрибуты и значения:

for (var i = 0; i < fNames.length; i++) {
	fTemplate.clone().appendTo(fRow).children()
		.filter('img').attr('src', fNames[i] + ".png").end()
		.filter('label').attr('for', fNames[i]).text(fNames[i]).end()
		.filter('input').attr({ name: fNames[i], value: 0, required: "required" })
}

Я использую методы filter и end, чтобы сужать и расширять выборку, и метод attr, чтобы установить значения атрибутов. Я заканчиваю полностью заполненным набором элементов для каждого нового цветка, вставленного в элемент div и занесенного таким образом в строку таблицы. Результат можно увидеть на рисунке 11-2.

Рисунок 11-2: Добавление на страницу новых цветов

Одной из приятных возможностей jQuery, очевидной в данном примере, является способ, которым вы можете выбирать и перемещаться по элементам, которые еще не присоединены к основному документу. Элементы шаблона не являются частью документа, когда я их клонирую, но я все же могу использовать методы children и filter, чтобы сузить выборку.