javascript - 在 jQuery 中动态推送/创建元素，然后立即循环添加 HTML

Question

我正在尝试在 jQuery 代码段中定义一个易于用户更改的区域。最终目标是用户定义值，但 jQuery 将从列表中创建对象。

我从这个简单的 HTML div 开始：

<div class="slider-container"></div>

其次是js概念：

var newSlides = [];
$(".slider-container").each(function(){
    newSlides.push({
        image: {
            url:       "http://placekitten.com/960/400",
            title:     "Sample Title 1",
            subtitle:  "Sample Subtitle 1"
        },
        image: {
            url:       "http://placekitten.com/961/401",
            title:     "Sample title 2" 
        };
    });
});

我希望它能够获取这些值并执行以下操作：

var index = 1;
$("slider-container").append(
    $("<div/>", {class: "slide s-" + index++})
        .append($("<img/>, {src: "url-from-above"}))
        .append($("<div/>, {class: "slide-titles"})
            .append($("<h2/>, {class: "title").text("text-from-above))
            .append($("<h3/>, {class: "subtitle").text("text-from-above))))

所以最终的结果是：

<div class="slider-container">
    <div class="slide s-1">
        <img src="http://placekitten.com/960/400 />
        <div class="slide-titles">
            <h2>Sample Title 1</h2>
            <h3>Sample Subtitle 1</h3>
        </div>
    </div>
    <div class="slide s-2">
        <img src="http://placekitten.com/961/401" />
        <div class="slide-titles">
            <h2>Sample Title 2</h2>
        </div>
    </div>
</div>

目标是用户只需定义值，而不必担心定义 HTML 或将内容放在正确的位置。任何人都可以轻松编辑。

Answer 1

我同意其他人的观点，即像 Mustache 这样的模板引擎会很有用。如果你只是想用直接的 jQuery 来做：

for(i=0; i<newSlides.length; i++) {
    var slider = $('.slider-container');
    var slide_data = newSlides[i];
    var slide = $('<div class="slide s-' + i + '"/>').appendTo(slider);
    $('<img src="' + slide_data.url + '" />').appendTo(slide);
    var titles = $('<div class="slide-titles"/>').appendTo(slide);
    if(slide_data.title) {
        $('<h2>' + slide_data.title + '</h2>').appendTo(titles);
    }
    if(slide_data.subtitle) {
        $('<h3>' + slide_data.subtitle + '</h3>').appendTo(titles);
    }
}

对于上面的代码，您需要修改push()语句，以便将对象直接推送到数组中，而不是推送由目标对象组成的对象。例如

var newSlides = [];
newSlides.push(
    {
        url:       "http://placekitten.com/960/400",
        title:     "Sample Title 1",
        subtitle:  "Sample Subtitle 1"
    },
    {
        url:       "http://placekitten.com/961/401",
        title:     "Sample title 2" 
    }
);