使用 JQuery 为 div 添加 id 以使用 JSON 和 JQuery 制作动态表

Question

我正在尝试使用 Ajax 从 URL 获取 JSON 数据以制作动态联系人表，并在用户单击表上的姓名时使用引导模式显示带有特定联系人信息的卡片。我让每个联系人模态都有自己的模态块，并希望使用不同的 id 来识别和填充每个模态 div 的正确数据，但是当我想将 id 属性添加到特定 div 时，我发现 id 没有t 用下面的代码添加。找不到问题出在哪里，特来求救。

 var modal_elements = $(modalTemplate); 
                    var contactModalid = "myModal" + i.toString();
                    modal_elements.find("#myModal0").attr("id", contactModalid);
                    modal_elements.find("#name").text(contact.name);
                    modalContainer.append(modal_elements);

以下是我在 HTML 头中的整个脚本块，以便更好地了解我的整个情况。

$(document).ready(function () {

        var contactTemplate =
            "<tr><td class=\"contactID\">contact's id goes here</td>" +
            "<td><a data-toggle=\"modal\" class=\"contactName\">contact's name goes here</a></td></tr>";

        var modalTemplate = 
        "<div class=\"modal fade\" id=\"myModal0\" role=\"dialog\">" + 
        "<div class=\"modal-dialog\">" + 
        "<div class=\"modal-content\">" + 
        "<div class=\"modal-body\" style=\"padding:80px 50px; background-color:DodgerBlue; color: white\">" +
        "<h2 id=\"name\" style=\"text-align: right\"></h2>" + 
        "<p id=\"title\" style=\"text-align: right\">Web Designer</p></div>" + 
        "<div class=\"modal-footer\" style=\"background-color:black; color: white\">" + 
        "<p id=\"phone_email\">222.222.2222 | info@business.com</p><p id=\"address\">1812 Rafe Lane, Jackson, MS 39211</p></div></div></div></div>";

        $.ajax({
            url: 'http://jsonplaceholder.typicode.com/users',
            type: 'GET',
            success: function (msg) {
                var container = $("tbody");
                var modalContainer = $("#cardModal");

                for (var i = 0; i < msg.length; i++) {
                    var contact = msg[i];

                    var contact_elements = $(contactTemplate);
                    contact_elements.find(".contactID").text(contact.id);
                    contact_elements.find(".contactName").text(contact.name);
                    contact_elements.find("a").attr("id", i.toString());
                    var herfValue = "#myModal" + i.toString();
                    contact_elements.find("a").attr("href", herfValue);
                    container.append(contact_elements);


                    var modal_elements = $(modalTemplate); 
                    var contactModalid = "myModal" + i.toString();
                    modal_elements.find("#myModal0").attr("id", contactModalid);
                    modal_elements.find("#name").text(contact.name);
                    modalContainer.append(modal_elements);


                };
            }

        });
    });

Answer 1

只需将其更改为

modal_elements.attr("id", contactModalid);

会解决的。

模板中称为#myModal0 的元素是modal_elements 表示的元素，因为它是模板中元素的根元素。使用“查找”搜索元素的 children，但您想修改元素本身。

Answer 2

正如@ADyson所说，当你找到元素时，它会在被选元素中找到子元素，所以你的脚本应该包含

modal_elements.attr("id", contactModalid);

或 选择它的前一个对象

modal_elements.find("#myModal0").prevObject[0].id = contactModalid;

两个都可以！！