javascript - 获取 HTML 到子元素

Question

有没有办法获取 HTML 字符串，或者元素的 document-fragment，直到某个元素？

例如，假设我有以下 HTML

<div id="blocks">
    <div class="block">
        <div>
            <ul>
                <li id="target">Some List Item</li>
                <li>Some Other List Item</li>
            </ul>
        </div>
    </div>
</div>

这只是一个例子，HTML实际上会更复杂，层次更多

我希望能够做的是:

$(".block").html("#target")

并得到一个 HTML 字符串，例如:

<div>
    <ul>
         <li id="target">Some List Item</li>
    </ul>
</div>

注意结果 HTML 中只有一个列表项

我想获取 .block 元素的所有 HTML，直到 #target 元素

谢谢!

Answer 1

//clone the original `.block` and get it's `#target`.
var cloned = $('#target').closest('.block').clone().find('#target');
var temp;
//go up the cloned parents and remove child that is not in the path of `#target`
while(true){
    temp = cloned.parent();
    var flag = false;
    temp.children().each(function(i, el){
        if(flag)
            $(el).remove();
        if($(el).is(cloned))
            flag = true;
    });
    if(cloned.is('.block')) break;
    cloned = temp;
}

在此之后，cloned.html() 就是您所需要的。见 fiddle :http://jsfiddle.net/Fx5pU/

请注意，与此处建议的其他一些解决方案相比，这不会更改原始 HTML。