如何正确地遍历列表项以创建html内容？

Question

期望的行为

单击按钮时，对于每个包含图像的li ，一个函数都会创建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/

脚本

它基本上遵循以下格式：

• 创建元素
• 应用属性
• 将其附加到必要的父div

就像我说的那样，必须有一种更简洁的方法，但这是我目前所知道的。

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);
        }
    });
    });
});

Answer 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)
}

演示： 小提琴