Изменение атрибута клонированного элемента

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 будет по-прежнему имеют те же данные, нотой идентификатор в качестве элемента, который он был клонирован из, но все-таки меняет того, что Предполагается, что

Answer 1

Работает jsFiddle что-то вроде того, что вы хотите
(Обратите внимание: я использовал строки i вместо переменных (т. tunnus), поскольку у меня не было к ним доступа).

Несколько вещей отметить:

.children

Это позволит получить ВСЕ дети элемента вы направляете его на. Этот метод будет NOT найти определенный дочерний элемент, который вы желаете. Чтобы сделать это, используйте .find() или .closest()

Исправление:

я замешан. Вы можете выбрать конкретного ребенка с children(), но не так, как вы это делали * (используя [??] < - квадратные скобки, чтобы получить правильный) (

Например:

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-* атрибут вы выбираете, а второй является то, что вы устанавливаете это значение