jquery - dom 操作

Posted 2023-05-09

【中文标题】jquery - dom 操作

【英文标题】：jquery - dom manipulation

【发布时间】：2011-02-19 16:18:07

【问题描述】：

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

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

有什么想法可以做到这一点吗？

【问题讨论】：

这可能是题外话，但你需要它来调试或其他什么吗？如果您正在寻找调试目的，您是否尝试过 Firebug？

是的，我知道 Firebug，但我需要在“真实”页面上使用它

【参考方案1】：

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

所以clone那些元素，例如：

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

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

要么将覆盖图形（您可以使用 themeroller 进行）设置为不透明的东西，要么将一些代码附加到 open 和 close 事件：

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

Proof of concept here.

编辑：This demo keeps the inline style defined in a parent element.

【讨论】：

是的，虽然 clone 是我的第一个，但问题是 Clone() 不会复制父级的样式。示例：jsfiddle.net/rvbmh

@grega g：你为什么使用内联样式？

没有理由，如果我将样式移动到 css 'file' 也是一样的：jsfiddle.net/Nda55

是的，但文件中的 CSS 或在样式标签内定义的 CSS 将应用于对话框内容。 @karim79：不错的演示，但是您可以添加一些由 google 托管的 UI 样式，以使对话框窗口更加可见；）ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/…

这会照顾一级父级，但我需要它来处理任意 DOM。如何从原始元素中获取“计算”的宽度、高度、字体大小等值并将它们设置为克隆。并对所有子元素递归地执行此操作。或者也许 jquery.extend() 函数可以解决问题。

【参考方案2】：

感谢post 找到答案

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

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