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

Pushing/Creating elements dynamically in jQuery and then immediately looping through to append HTML

本文关键字：然后 循环 HTML 添加 元素 创建 jQuery 动态      更新时间：2023-09-26

我试图在一个jQuery片段中定义一个区域，方便用户更改。最终目标是用户定义值，但是jQuery将从列表中创建对象。

我从这个简单的HTMLdiv开始: 
<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或将东西放在正确的位置。任何人都可以轻松编辑

我同意其他人的看法，像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" 
    }
);
相关文章：