Как правильно перебрать элементы списка для создания HTML-контента?

0

Желаемое поведение

При нажатии кнопки для каждого 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 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">

Заметки

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

демонстрация

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);
        }
    });
    });
});
  • 0
    Пожалуйста, сделайте отступ для своего Javascript, чтобы он был читабельным.
  • 0
    Можно создавать documentFragment с помощью $() , например, $("<div>") . Гораздо проще, чем методы DOM.
Показать ещё 1 комментарий
Теги:
loops
each

1 ответ

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

Демо: скрипка

Поделиться
  • 0
    Благодарю вас. Много чище и интуитивно понятен и делает свою работу.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню