Question

我正在使用Jquery进行简单的插入，一切正常唯一的问题是在第一次插入后，新对象会覆盖最后插入的一个

function insert_note(note_data){
    console.log(note_data);
    var note_object = {}

    note_data.forEach(function(item){
        note_object[item.name] = item.value;
    });

    console.log(note_object);
    note_layout = $(note_layout);
    note_layout.find('span').text(note_object.note_title);
    note_layout.find('p').text(note_object.note_content);
    note_layout.attr('data-id', note_object.note_id);

    $('#notes_container').prepend(note_layout);

这是保存在js变量中的note_layout。每次我用来自用户的信息修改它，并使用prepend（）将其附加到DOM：

    <div class="row" data-id="">
      <div class="col l8 push-l2 s10 push-s1">
        <div class="card blue-grey darken-1">
          <div class="card-content white-text">
            <span class="card-title"></span>
            <p></p>
          </div>
          <div class="card-action">
            <a class="waves-effect waves-teal btn-flat" data-action="set_as_done">Set as done</a>
            <a class="waves-effect waves-teal btn-flat" data-action="postpone">Postpone</a>
          </div>
        </div>
      </div>
    </div>

我想念一些东西吗？ Thx提前！

Answer 1

正如A. Wolff评论的那样，您在第一次调用后重复使用相同的note_layout，然后移动对象，而不是创建新对象。你可以通过永远不改变note_layout，创建一个新变量来保存你正在创建的DOM对象并插入它来解决这个问题。

变化：

console.log(note_object);
note_layout = $(note_layout);
note_layout.find('span').text(note_object.note_title);
note_layout.find('p').text(note_object.note_content);
note_layout.attr('data-id', note_object.note_id);

$('#notes_container').prepend(note_layout);

到

console.log(note_object);
var note_layout2 = $(note_layout);
note_layout2.find('span').text(note_object.note_title);
note_layout2.find('p').text(note_object.note_content);
note_layout2.attr('data-id', note_object.note_id);

$('#notes_container').prepend(note_layout2);

Jquery.prepend（）删除最后插入的值

1 个答案: