Question

在BBC文章中，例如this one，在DOM链的深处有一个DOM story-body的DOM元素。

我想要隐藏此（唯一）DOM元素的“外部”的所有DOM元素。问题是我不能只做

$('*').hide();
$('.story-body');

因为我需要确保story-body的父母，祖父母等。我也做不到

$('*').hide();

var current = $('.story-body').show();
while(current = current.parent()) {
   current.show();
}

因为那只会显示一切。

有什么建议吗？

Answer 1

你可以隐藏所有内容，然后显示.story-body，它的祖先链及其所有后代：

$("body *").hide();               // Hide all
var sb = $(".story-body").show(); // Find and show story-body
sb.parents().show();              // ...and its parents
sb.find("*").show();              // ...and its contents

如果你喜欢超级紧凑的东西，或者作为双线：

$("body *").hide();
$(".story-body").show().parents().show().end().find("*").show();

但我不会指望隐藏所有其他元素的效果。虽然当我在那个故事上尝试时，它运作良好。

这是一个bookmarklet，复制下面的javascript:行并将其粘贴为书签的目标，然后导航到BBC新闻页面并点击书签：

javascript:(function(){(function(){var d=document,s=d.createElement("script"),st=new Date();s.src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js";d.body.appendChild(s);after();function after(){var $,sb;if(typeof jQuery!=="function"){if(new Date()-st<5000){setTimeout(after,100);}return;}$=jQuery.noConflict();$("body *").hide();sb=$(".story-body").show();sb.parents().show();sb.find("*").show();}})();})();

来源：

(function() {
    // Load jQuery
    var d = document,
        s = document.createElement("script"),
        st = new Date();
    s.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js";
    d.body.appendChild(s);

    // Wait for it to load
    after();
    function after() {
        var $, sb;
        if (typeof jQuery !== "function") {
            // Not loaded yet
            if (new Date() - st < 5000) { // Give up after 5 seconds
                // Try again in 100ms
                setTimeout(after, 100);
            }
            return;
        }

        // Minimize impact
        $ = jQuery.noConflict();

        // Do the work
        $("body *").hide();
        sb = $(".story-body").show();
        sb.parents().show();
        sb.find("*").show();
    }
})();

似乎在我试过的四五个故事中工作得很好。

Answer 2

您可以分离故事，删除其他所有内容，然后重新插入故事：

 var stories = $('.story-body');
 stories.detach();
 $(document.body).children().remove();
 stories.appendTo(document.body);

只保留DOM树的子树

2 个答案: