Хранить только поддерево дерева DOM

Question

В статьях BBC, таких как этот , есть элемент 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

Вы можете отсоединить историю, удалить все остальное, а затем снова вставить историю:

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

Answer 2

Вы можете спрятать все, а затем показать .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();

Но я бы не рассчитывал на эффект от сокрытия всех этих других элементов. Хотя, когда я попробовал эту историю, она работала нормально.

Вот для этого букмарклет , скопируйте строку 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();
    }
})();

Кажется, что я отлично работаю с четырьмя или пятью историями, которые я пробовал.