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