javascript - jquery - dom 操作

Question

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

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

任何想法如何做到这一点？

Answer 1

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

所以克隆这些元素，例如：

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

该对话框应隐藏页面的其余部分。

将覆盖图形（您可以使用themeroller 进行）设置为不透明的，或者将一些代码附加到打开和关闭事件：

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

这里的概念证明。

编辑：此演示保留在父元素中定义的内联样式。

Answer 2

感谢这篇文章找到了答案

在这里查看。它演示了从 iframe 中提取某个类的所有元素，然后将它们附加到主文档并复制它们的样式。问题是它非常慢，尤其是当我们复制许多带有很多子元素的元素时。如果有人知道提高性能的方法，请告诉我（在此处发布:)）。

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