Javascript jquery-dom操作

我想在对话框中显示具有特定类的所有元素。该对话框应隐藏页面的其余部分。例如：

在这个SO页面上，我想用class=“user info”显示所有元素。这些元素将以相同的宽度和高度以及相同的css显示在对话框中，其他所有内容都将被隐藏。这就像将它们从页面中剪切出来并粘贴到对话框中一样

你知道怎么做吗

我想在对话框中显示所有 具有特定类的元素

因此，这些要素，例如：

var $div = $("<div />").append($(".fooClass").clone()).dialog();

---

编辑：

多亏了这一点，才找到了答案

看看吧。它演示了从iframe中提取特定类的所有元素，然后将它们附加到主文档并复制它们的样式。问题是它的速度非常慢，特别是如果我们用很多子元素复制很多元素的话。如果有人知道提高性能的方法，请告诉我（张贴在此处：）

---

注意：我在iframe中加载JSFIDLE页面的原因是它（浏览器？）不允许jquery检查不是从同一个域加载的iframe的内容。

这可能是离题的，但您是否需要它进行调试或其他操作？如果您想进行调试，是否尝试过Firebug？是的，我知道Firebug，但我需要在“真实”页面上使用它是的，克隆是我的第一个，但问题是克隆（）不复制父级的样式。示例：@grega g:为什么要使用内嵌样式？没有原因，如果我将样式移动到css“文件”中也是一样的：是的，但文件中的css或样式标记内部定义的css将应用于对话框内容@karim79：很好的演示，但是你可以添加一些由google托管的UI样式，以使对话框窗口更可见；）这会处理第一级父级，但我需要它来处理任意DOM。获取宽度、高度、字体大小等“计算”值如何，。。。从原始元素并在克隆上设置它们。对所有子元素递归地执行此操作。或者jquery.extend（）函数就可以做到这一点。

$div.dialog({
   open: function(event, ui) { $("body").hide() } // that will hide everything, including the dialog, so watch out.
   close: function(event, ui) { $("body").show() }
});