jquery - 如何删除除一个之外的所有元素，保持相同的 CSS 路径？

Question

我需要从页面中提取单个元素（及其所有内容），但仍保持指向它的相同 CSS 树。

为了解释，假设我有以下 DOM：

<div>1
    <div>2</div>
    <div>3
        <div>4
            <div>5</div>
        </div>6
        <div>7
            <div>8
                <div>9</div>
            </div>
        </div>
        <div>10
            <div>
                <div>content</div>
            </div>
        </div>
    </div>
</div>

我只对包含 的元素感兴趣content，即我需要将 DOM 转换为：

<div>
    <div></div>
    <div>
        <div></div>
        <div></div>
        <div>
            <div>
                <div>content</div>
            </div>
        </div>
    </div>
</div>

（路径content应该仍然相同）

我在这个jsfiddle中尝试类似的东西：

$("#want").siblings().html("");
$("#want").parents().siblings().html("");

这似乎还不够。

建议？

编辑：概括示例，可以有任何元素而不是 div。

Answer 1

也许是这样的：

var classForKeepings = 'keepThisItem';
var $elem = $('#want'); // give start element
$elem.addClass(classForKeepings); // give a class to make it stay

while( $elem.parent().length!==0 ){ // while the element has a parent
    $elem = $elem.parent(); // shift $elem to the parent
    $elem.addClass(classForKeepings ); // and add a class to make it stay
}

$('#startElement *:not(.'+classForKeepings+')').remove(); // remove all elements not tagged with the class
$('.'+classForKeepings ).removeClass(classForKeepings); // Cleanup afterwards

我使用了删除，因为您不需要它们。如果您确实需要这些，可以将其更改为.html('')

Answer 2

使用这个语法

$(function(){
   $("div:not(#want)").contents().filter(function() {
    return this.nodeType == 3; //Node.TEXT_NODE
   }).remove();     
});

希望能帮助到你。

Answer 3

这似乎有效.. 太糟糕了，我需要它与Cheerio一起工作，但似乎没有contents().. 想我将不得不使用 jsdom 来代替.. 如果我找不到其他解决方案..

$("#want").siblings().html("");
$("#want").parents().siblings().html("");
var want = $("#want").clone();
$("*").contents().filter(function() {
    return this.nodeType == 3; //Node.TEXT_NODE
 }).remove();
$("#want").replaceWith(want);