所需行为
单击按钮时,对于包含图像的每个li
,函数会创建div并将div附加到父div。
运行函数后,li
的每个实例的标记应如下所示:
<div class="recipe_container">
<div class="recipe_meta">
<div class="recipe_left_col">
<div class="recipe_right_col">
当前行为
在演示中,应该创建两个<div class="recipe_container">
实例,该函数的第一次迭代是生成复制嵌套的div。第二次迭代是创建正确的标记。
看起来像这样:
<div class="recipe_container">
<div class="recipe_meta">
<div class="recipe_left_col">
<div class="recipe_right_col">
<div class="recipe_meta"> <!--bad-->
<div class="recipe_left_col"> <!--bad-->
<div class="recipe_right_col"> <!--bad-->
<div class="recipe_container">
<div class="recipe_meta">
<div class="recipe_left_col">
<div class="recipe_right_col">
备注
我很擅长使用javascript创建div,所以我确信我构建函数的方法过于冗长,但我只是试图先理解逻辑,并且在我完成时会使函数更简洁。更好地了解它的运作方式。
示范
http://jsfiddle.net/rwone/nSws2/
脚本
它基本上遵循以下格式:
就像我说的那样,必须有一种更简洁的方式,但这就是我现在所知道的。
function createContent(day, meal, img_src, time) {
// create recipe container
var r_container = document.createElement("div");
r_container.className = "recipe_container";
// append recipe container
$("#right_shopping_list_creator").append(r_container);
// create recipe meta
var r_meta = document.createElement("div");
r_meta.className = "recipe_meta";
// append recipe meta
$(".recipe_container").append(r_meta);
// create day paragraph
var r_day = document.createElement("p");
r_day.className = "day";
r_day.innerHTML = day;
// create meal paragraph
var r_meal = document.createElement("p");
r_meal.className = "meal";
r_meal.innerHTML = meal;
// append day and meal
$(".recipe_meta").append(r_day, r_meal);
// create recipe left col
var r_left_col = document.createElement("div");
r_left_col.className = "recipe_left_col";
// append recipe left col
$(".recipe_container").append(r_left_col);
// create image
var r_image = document.createElement("img");
r_image.src = img_src;
// append image
$(".recipe_left_col").append(r_image);
// create recipe right col
var r_right_col = document.createElement("div");
r_right_col.className = "recipe_right_col";
// append recipe right col
$(".recipe_container").append(r_right_col);
// create time paragraph
var r_time = document.createElement("p");
r_time.innerHTML = time;
// create ingredients paragraph
var r_ingredients = document.createElement("p");
r_ingredients.innerHTML = "ingredients";
// append time and ingredients
$(".recipe_right_col").append(r_time, r_ingredients);
// create ul
var r_ul = document.createElement("ul");
// append ul
$(".recipe_right_col").append(r_ul);
// create directions paragraph
var r_directions = document.createElement("p");
r_directions.innerHTML = "directions";
// append directions paragraph
$(".recipe_right_col").append(r_directions);
// create ol
var r_ol = document.createElement("ol");
// append ol
$(".recipe_right_col").append(r_ol);
}
$(document).on("click", "button", function() {
var day_name = $(".day_name");
// for each day
$(day_name).each(function(x, y) {
var lis = $(y).find("li");
// for each li (meal)
$(lis).each(function(i, data) {
// if li contains an image (meal)
if ($(data).find('img').length) {
var img_filename = $(data).find("img").attr("src");
var testday = "monday";
var testmeal = "breakfast";
var testtime = "6:00am";
createContent(testday, testmeal, img_filename, testtime);
}
});
});
});
答案 0 :(得分:1)
您需要使用新创建的元素引用向其添加新元素,而不是运行像
这样的选择器function createContent(day, meal, img_src, time) {
// create recipe container
var $rc = $('<div />', {
'class': 'recipe_container'
}).appendTo('#right_shopping_list_creator')
// create recipe meta
var $rmeta = $('<div />', {
'class': 'recipe_meta'
}).appendTo($rc)
// create day paragraph
var $rday = $('<p />', {
'class': 'day',
html: day
}).appendTo($rmeta)
// create meal paragraph
var $rday = $('<p />', {
'class': 'meal',
html: meal
}).appendTo($rmeta)
// create recipe left col
var $rlc = $('<div />', {
'class': 'recipe_left_col'
}).appendTo($rc)
// create image
$('<img />', {
src: img_src
}).appendTo($rlc)
// create recipe right col
var $rrc = $('<div />', {
'class': 'recipe_right_col'
}).appendTo($rc)
// create time paragraph
$('<p />', {
html: time
}).appendTo($rrc)
// create ingredients paragraph
$('<p />', {
html: 'ingredients'
}).appendTo($rrc)
// create ul
var $rrcul = $('<ul />').appendTo($rrc)
// create directions paragraph
$('<p />', {
html: 'directions'
}).appendTo($rrc)
// create ol
var $rrcol = $('<ul />').appendTo($rrc)
}
演示:Fiddle