在 jquery 中创建多个 div 元素

Question

我想创建一个功能，通过捕获标题、文本、照片、link 和 link 的文本为我创建多个框。就是这些值变了，但是盒子的整体形状是一个模型

每个div包含与jquery代码取不同的值：

<div>
   <img></img>
   <h3></h3>
   <p></p>
   <a><span></span></a>
</div>

我试过了，但不完整而且不起作用：

$(document).ready(function () {
        var newDiv = document.getElementById("reports-box");

        function makenewDivBox(options) {
            var div = document.createElement("div");
            for (var i = 0; i < options.length; i++) {
                var div = document.createElement("div");
                var img = document.createElement("img");
                var title = document.createElement("h3");
                var description = document.createElement("p");
                var link = document.createElement("a");
                var linkText = document.createElement("span");
                img.id = img1;
                img.type = "img";
                img.src = options[i].src;
                title.id = Title1;
                title.type = "h3";
                title.text = options[i].text;
                description.id = des1;
                description.type = "p";
                description.text = options[i].text;
                link.id = link1;
                link.type = "hrefa";
                link.text = options[i].text;
                linkText.id = des1;
                linkText.type = "hrefa";
                linkText.text = options[i].text;
                div.appendChild(img)
                div.appendChild(title)
                div.appendChild(description)
                div.appendChild(link)
                div.appendChild(linkText)
            }
            newDiv.appendChild(div);
        }
        var options1 = [{
            title="t1",
            img: "url('image/j1.png')",
            description: "content1",
            link: "www.link1.com",
            linkText: "click here"
        }]
        var options2 = [{
            title="t2",
            img: "url('image/j2.png')",
            description: "content2",
            link: "www.link2.com",
            linkText: "more here"
        }]
        var options3 = [{
            title="t3",
            img: "url('image/j3.png')",
            description: "content3",
            link: "www.link3.com",
            linkText: "report here"
        }]
        var options4 = [{
            title="t4",
            img: "url('image/j4.png')",
            description: "content4",
            link: "www.link4.com",
            linkText: "more details here"
        }]
        makenewDivBox(options1);
        makenewDivBox(options2);
        makenewDivBox(options3);
        makenewDivBox(options4);
});

Answer 1

我自己解决了。我会把代码放在这里，也许对某人有用：

在html中：

<div class="rowReports"></div>

在 jquery 中：

$(document).ready(function () {
var Titels = [
            "title1",
            "title2",
            "title3",
            "title4",
            "title5",
            "title6",
            "title7",
            "title8"
        ];
        var imgSrces = [
            "/FrontEnd/media/image/Nashriyat.png",
            "/FrontEnd/media/image/plan.png",
            "/FrontEnd/media/image/majameElmi.png",
            "/FrontEnd/media/image/kargahAmuzeshi.png",
            "/FrontEnd/media/image/targoman.png",
            "/FrontEnd/media/image/scoma.png",
            "/FrontEnd/media/image/elmsanji.png",
            "/FrontEnd/media/image/tablighat.png"
        ];
        var Descriptions = [
            "Desc1",
            "Desc2 ",
            "Desc3",
            "Desc4",
            "Desc5",
            "Desc6",
            "Desc7",
            "Desc8",
            "Desc9"
        ]
        var Links = [
            "/Page/frmDefault1.aspx",
            "/Page/frmDefault2.aspx",
            "/Page/frmDefault3.aspx",
            "/Page/frmDefault4.aspx",
            "/Page/frmDefault5.aspx",
            "/Page/frmDefault6.aspx",
            "/Page/frmDefault7.aspx",
            "/Page/frmDefault8.aspx"
        ];
        var TextLinks = [
            "more report",
            "send email",
            "more details",
            "join group",
            "more info",
            "add number",
            "more",
            "continue"
        ];
        for (i = 0; i<Titels.length; i++)
            $('.rowReports').append(
                $('<div/>')  
                .attr("id", "newDiv"+i)
                    .addClass("newDiv reports-box bloated")
                    .append(' <a href="' + Links[i] + '">' + 
                        '<img class="servicesPic" alt="info" src="' + imgSrces[i] + '"/>' + '<h3>' + Titels[i] + '</h3>' +
                        '<p>' + Descriptions[i] + '</p>' +
                    '<span>' + TextLinks[i] + '</span>'+ '</a>'
                        )

        );
});

在 jquery 中创建多个 div 元素

create multi div element in jquery

element

createfile