jQuery Return 新创建的元素

Question

我正在使用jQuery点击按钮时创建一个新元素，功能如下：

function insert_ordered_group() {

    var template = 
        '<div class="row recipient-group">' +
            '<div class="col-sm-12 group-name-row handle">' +
                '<div class="dropdown">' +
                    '<a data-toggle="dropdown" href="#"><span class="group-name">Group One</span><span class="glyphicon glyphicon-triangle-bottom"></span></a>' +
                    '<ul class="dropdown-menu">' +
                        '<li class="rename-group-tool">Rename Group</li>' +
                        '<li class="add-group-recipient">Add Recipient</li>' +
                        '<li class="remove-group-tool">Delete Group</li>' +
                    '</ul>' +
                '</div>' +
            '</div>' +
        '</div>';

    // Add HTML to recipient form
    $('#ordered_recipients_sortable').append(template);


    return true;
}

是否可以 return 引用新创建的对象，而不是 return 为真，以便我可以在 DOM 中进一步操作它？由于此函数的动态特性，我不希望为每个元素生成一个 ID 并在以后引用它。

我试过：

var test = $('#ordered_recipients_sortable').append(template);
console.log(test);

但是，那只是 returned #ordered_recipients_sortable 而不是新元素。

谢谢！

Answer 1

您可以只使用 appendTo，它 returns 附加元素而不是附加到

的元素

var test = $(template).appendTo('#ordered_recipients_sortable')

Answer 2

@adeneo 提供的答案正是我正在寻找的，并且比我在寻找时找到的解决方案更可取，但是，这也确实有效：

var new_element = $("#ordered_recipients_sortable .recipient-group:last-child");

Answer 3

试试这个：

function insert_ordered_group() {

    var template = 
        '<div class="row recipient-group">' +
            '<div class="col-sm-12 group-name-row handle">' +
                '<div class="dropdown">' +
                    '<a data-toggle="dropdown" href="#"><span class="group-name">Group One</span><span class="glyphicon glyphicon-triangle-bottom"></span></a>' +
                    '<ul class="dropdown-menu">' +
                        '<li class="rename-group-tool">Rename Group</li>' +
                        '<li class="add-group-recipient">Add Recipient</li>' +
                        '<li class="remove-group-tool">Delete Group</li>' +
                    '</ul>' +
                '</div>' +
            '</div>' +
        '</div>';

    // Add HTML to recipient form
    var appendTo = $('#ordered_recipients_sortable');
    appendTo.append(template);
    return appendTo.find(".row.recipient-group:last-of-type")

}

jsfiddle: https://jsfiddle.net/zxv4xszb/2/

这将始终添加最后一个。

jQuery Return 新创建的元素

jQuery Return Newly Created Element

jquery

reference

append