jQuery-DOM操作

Question

我想在對話框中顯示具有特定類的所有元素。 該對話框應隱藏頁面的其余部分。 因此，例如：

在此SO頁面上，我想顯示所有帶有class =“ user-info”的元素。 這些元素將以相同的寬度和高度以及相同的css顯示在對話框中，其他所有內容將被隱藏。 就像將它們從頁面中剪切出來並粘貼到對話框中一樣。

任何想法如何做到這一點？

Answer 1

我想在對話框中顯示具有特定類的所有元素。

因此， 克隆那些元素，例如：

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() }
});

這里的概念證明。

編輯： 此演示保留在父元素中定義的內聯樣式。

Answer 2

找到了答案，感謝這篇文章

在這里查看 。 它演示了從iframe中提取特定類的所有元素，然后將其附加到主文檔中並復制其樣式。 問題在於它非常慢，特別是如果我們復制帶有許多子元素的許多元素時。 如果有人知道提高性能的方法，請告訴我（在此處發布：））。

注意：我在iframe中加載jsFiddle頁面的原因是它（瀏覽器？）不會讓jquery檢查未從同一域加載的iframe內容。