javascript - 复制要在模式框中显示的父元素

Question

我有一个链接，我想显示一个模式对话框，其中包含标题和单击链接的父元素的副本。

$('#link').live('click',function(){
    container = $(this).parents(".container")[0];
    message = $("<h2>You clicked on this.</h2>" + container);
    message.find(".foo, .bar, .lorem").remove();

    console.log(message[0]);
    // code for displaying the box using message[0]
});

我还必须过滤掉容器元素的某些子元素。

然而，这（这是我在涉足一段时间后的第四次尝试clone()）insertAfter()不起作用。它只显示<h2>，看不到父元素的副本。

显然，在模态后面的页面上仍然可见的原始父元素不应该受到影响。

这里有什么问题？

Answer 1

$(document).on('click', '#link', function(){
    var container = $(this).closest(".container").clone(true);
        container.find(".foo, .bar, .lorem").remove();
    var message = $("<h2>You clicked on this.</h2>").add(container);

    $('#modalID').append(message);

    console.log(message);
});

Answer 2

我建议您联系 line message =$("<h2>You clicked on this.</h2>" + container);因为这不是连接字符串的正确方法

像这样

message = "<h2>You clicked on this.</h2>" + container;

Answer 3

message = $("<h2>You clicked on this.</h2>" + container);

将是“这里有什么问题？”的答案。container是一个 DOM 元素，加号运算符不起作用。我猜你想做类似的事情

var message = $(this).closest(".container").clone(true);
message.prepend("<h2>You clicked on this.</h2>");
message.find(".foo, .bar, .lorem").remove();

// then take the message container and view it as a modal box