使用JQuery為div添加一個ID，以使用JSON和JQuery創建動態表

Question

我試圖使用Ajax從URL獲取JSON數據以創建動態聯系人表，並在用戶單擊表上的名稱時使用引導程序模式顯示帶有特定聯系人信息的卡片。 我使每個接觸式模態都有自己的模態塊，並希望使用不同的id來識別並向每個模態div填充正確的數據，但是當我想將id屬性添加到特定的div時，我發現id並沒有並添加以下代碼。 我找不到問題所在，所以我來這里尋求幫助。

 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表示的元素，因為它是模板中元素的根元素。 使用“查找”搜索元素的子元素，但是您想要修改元素本身。

Answer 2

確實，就像@ADyson所說的那樣，當您找到元素時，它會在所選元素內找到子元素，因此您的腳本應包含

modal_elements.attr("id", contactModalid);

或選擇其先前的對象

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

兩者都會工作！