Pro jQuery
Адам Фриман
Добавление дополнительной цветочной продукции
Первое изменение, которое я сделаю, это добавлю в магазин дополнительную цветочную продукцию. Я хочу сделать это, чтобы показать, как можно создавать элементы в цикле и потому что дополнительная информация пригодится в дальнейшем в этой главе. В листинге 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
, чтобы сузить выборку.