Question

我正在尝试克隆元素的更改属性，但它似乎无法正常工作。

我的jquery代码：

    $.ajax({
        url: _url,
        type: "POST",
        data: { note: _note, owner_id: _owner_id, registration_number: _registration_number },
        dataType: "json"
    }).done(function(data){
        var tunnus = data.id;
        if(editNoteId == null){
            var firstTableRow = $(".note-table").find("tr").first().clone(true);

            var editLink = $(".edit-note").first().clone(true).data("note-id", id);


            firstTableRow.children("td")[0].removeAttribute("class");
            firstTableRow.children("td")[0].setAttribute("class", tunnus);
            firstTableRow.children("td")[0].innerHTML = data.info;
            firstTableRow.children("td")[1].innerHTML = "timestamp";
            firstTableRow.children("td")[2].innerHTML = data.laatija;
            firstTableRow.children("td")[3] = editLink;

            $(".note-table").prepend(firstTableRow);



        }

我的元素：

<table class="table table--list note-table">
                                    <tbody><tr>
                    <td class="8038">now</td>
                    <td>timestamp</td>
                    <td>company</td>
                    <td> <a href="#" class="edit-note" data-toggle="modal" data-target="#notesModal" data-note-id="8037">Muokkaa</a></td>
                </tr><tr>
                    <td class="8037">fug</td>
                    <td>23.6.2016 12:51:29</td>
                    <td>company</td>
                    <td> <a href="#" class="edit-note" data-toggle="modal" data-target="#notesModal" data-note-id="8037">Muokkaa</a></td>
                </tr>
                                    <tr>
                    <td class="8036">another</td>
                    <td>23.6.2016 12:45:27</td>
                    <td>avoltus</td>
                    <td> <a href="#" class="edit-note" data-toggle="modal" data-target="#notesModal" data-note-id="8036">Muokkaa</a></td>
                </tr>
</table>

editLink仍然具有与克隆它的元素相同的data-note-id，但仍然会改变它应该的

Answer 1

这是一个有效的jsFiddle类似你想要的东西（注意，我使用了字符串而不是变量（即tunnus），因为我无法访问它们）< / em>的

有几点需要注意：


.children

这将使您所指向的元素的子元素 ALL 。此方法将 NOT 找到您想要的特定子元素。为此，请使用.find()或.closest()

校正：
我混淆了。您可以选择具有children()的特定孩子而不是您正在做的*（使用[??]＆lt; - 方括号来获得正确的孩子）（

例如：

firstTableRow.children("td")[0].removeClass();

......会变成......

firstTableRow.children("td:nth-child(1)").removeClass();

...或...

firstTableRow.children("td:first-child").removeClass();


.setAttribute() / .removeAttribute()

这些是有用的方法，但是，对于您正在做的事情，使用.removeClass()和.addClass()
更好，更易读

.first()

我对这种方法知之甚少，但只是要注意使用:nth-child()是一种更广泛使用的方法来获得你想要的孩子。 （将一个整数传递给括号以决定要获得哪一个（即1,2,3））

此外，您将元素设置为editLink的最后一行？根据事物的外观，您实际上想要设置该元素的data-note-id属性而不是整个元素。您可以使用：

firstTableRow.find("td:nth-child(4)").data("note-id", editLink);

...第一个参数是您选择的data-*属性，第二个参数是您将其设置为
的值

更改克隆元素的属性

1 个答案: