Question

我有一个div，我想写一个弹出窗口（用于打印）。

我正在使用jQuery的html（）函数抓取我想要的div的内容，如下所示：

function printOptions() {
        var printwindow = window.open('', 'Report', 'height=600,width=600');
        printwindow.document.write('<html><head><title>Report</title>');
        printwindow.document.write('</head><body>');
        printwindow.document.write($('#ReportHeader').html());
        printwindow.document.write($('#ReportData').html());
        printwindow.document.write('</body></html>');
        printwindow.document.close();
        printwindow.print();
        return true;
    }

但是，在我document.write（）#ReportHeader和#ReportData div的内容之前，我想稍微修改它们。

具体来说，我想用包含该文本框值的简单范围替换所有文本框。

类似的东西：

$("input[type=text]").each(function() {
    $(this).replaceWith("<span>" + $(this).val() + "</span>"); 
});

如何在不改变现有页面的情况下，只对这些div的内容执行此操作？我只是想修改我要写到打印窗口的内容。我不认为我可以选择html（）返回的内容，因为它只是返回一个字符串。

我做〜不想〜修改正在启动弹出窗口的原始页面。只是我将要写入弹出窗口的内容。

关于如何做到这一点的任何想法？

Answer 1

您可以使用.clone()来有效地执行此操作，如下所示：

printwindow.document.write(
  $('#ReportHeader').clone().find("input[type=text").each(function() {
    $(this).replaceWith("<span>" + $(this).val() + "</span>"); 
  }).end().html()
);

这会获得原始#ReportHeader及其子级的副本，以便您可以在不修改原始内容的情况下操纵它们，并且不会忍受html字符串的费用 - ＆gt;节点转换，这是非常昂贵的。

Answer 2

你可以通过常规的jQuery选择器和修饰符对div做任何你想做的事。

var $reportHeader = $($('#ReportHeader').html());

// Remove some div
$reportHeader.find('div.to_remove').remove();

// Now use $reportHeader.html() to add the modified contents to printwindow

Answer 3

您可以克隆内容，然后执行替换，然后编写它：

var cloned = $($('#ReportData').html());

使用$('html string')功能：

http://api.jquery.com/jQuery/#jQuery2

Answer 4

要使用静态span元素替换所有输入，您可以执行以下操作..（未测试）

$(":input").each(function() {
    var parent = $(this).parent();
    var val = $(this).val();
    $(parent).remove($(this).append("<span>" + $(this).val() + "</span>")); 
});

如何修改jQuery html（）方法的返回值？

4 个答案: