javascript - jQuery 克隆主包装内的元素

Question

我正在尝试创建一个摘要页面，在其中抓取主页中的所有内容并将其显示在重叠的 div 中，就像这些天显示的图像一样。

现在的问题是，一旦我将输入值粘贴到摘要/打印换行中，我就会丢失输入和选择值。

jQuery

    $(".header").clone().appendTo('.page');
    $(".task").clone().appendTo('.page');
    $(".options").clone().appendTo('.page');

.header 和 .task 只是纯文本输入。这效果很好。然而，在 .options 中，我有很多控件，例如 textarea、input 和 select ...我明白所有元素都放入 .page 中，但是我丢失了所有选定的值和文本。

有什么建议吗？谢谢

Answer 1

输入的值不存储在属性标记值中。这意味着副本不会设置该值。因此，在复制它们之前，请设置值 attr。

function CopyStuffToPage() {
    // Doing this will change the HTML for all the input elements
    $('input').each(function(index,element) {
       $(element).attr('value',$(element).val());
    });
    $('textarea').each(function(index,element) {
       $(element).html($(element).val());
    });
    $('select').each(function(index,element) {
       var value = $(element).val();
       $(element).children('option').removeAttr('selected');
       $(element).children('option[value='+value+']').attr('selected','selected');
    });

    // Then you can do this
    $(".header").clone().appendTo('.page');
    $(".task").clone().appendTo('.page');
    $(".options").clone().appendTo('.page');
}

对于选择，您必须将属性“selected”添加到选择所选择的选项中。

当我想通过 PHP 保存 div 的内容时，我遇到了同样的问题，我必须设置属性标签，然后发送 HTML。

编辑:澄清您正在复制的元素的值未存储为

<input value='this value'/>

它们存储在 DOM 中，因此克隆它们只会克隆 html，而不是值。