jQuery克隆元素with-in主包装

时间:2015-05-29 00:57:06

标签: javascript jquery

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

现在我遇到的问题是,一旦我将其传递到摘要/打印包装中,我就会丢失WITH RECURSIVE t(i) AS ( SELECT * FROM unnest('{A,B,C}'::char[]) ), cte AS ( SELECT i AS combo, i, 1 AS ct FROM t UNION ALL SELECT cte.combo || t.i, t.i, ct + 1 FROM cte, t WHERE ct <= 3 AND position(t.i in cte.combo) = 0 ) SELECT ARRAY(SELECT combo FROM cte ORDER BY ct, combo) AS result; input个值。

的jQuery

select

$(".header").clone().appendTo('.page'); $(".task").clone().appendTo('.page'); $(".options").clone().appendTo('.page'); .header只是纯文本输入。这很好用。但是在.task我有很多控件,例如.optionstextareainput ......我将所有元素都放入select但是我失去了所有选定的值和文本。

有什么建议吗? 感谢

2 个答案:

答案 0 :(得分: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');
}

对于选择,您必须添加属性&#39;已选择&#39;选择选择的选项。

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

编辑:要复制要复制的元素的值不会存储为

<input value='this value'/>

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

答案 1 :(得分:0)

您可以使用localstorage快速修补问题。 将值存储在文本框和textarea中,

//retrieving value from textbox and text area,
var textbox = $("#id-of-textbox").val();
var textarea = $("#id-of-textarea").val();

//retrieving the selected value for 'select'
var selectedValue = $('#id-of-select').val();

//storing the value in localstorage
localstorage.setItem("textbox", textbox);
localstorage.setItem("textarea", textarea);
localstorage.setItem("select", selectedValue);

//You can retrieve the above stored values anywhere you want as,
var newtextbox = localstorage.getItem("textbox");
var newtextarea = localstorage.getItem("textarea");
var newselect = localstorage.getItem("select");

//It is advisable to remove the store data after it's use,
localstorage.removeItem("textbox");
localstorage.removeItem("textarea");
localstorage.removeItem("select");

使用localstorage的好处是数据存储在用户的浏览器中,因此您可以像会话数据一样在任何页面上访问它。