使HTML达到子元素

Question

Is there a way to get an HTML string, or document-fragment of an element, up to a certain element?

For example, say I have the following 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>

This is just an example, the HTML will actually be much more complicated and with more levels

What I'd like to be able to do is something like:

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

And get a HTML string such as:

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

Notice how there's only one list item in the resulting HTML

I want to get all the HTML of the .block element, up to the #target element

Thanks!

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

After this the cloned.html() is what you need. See the fiddle: http://jsfiddle.net/Fx5pU/

And note that this will not change the original HTML in contrast to some other solutions suggested here.

Answer 2

Updated:

Clone the parents up to ".block" and remove the siblings of "#target".

var newBlock = $('#target').parents("div.block").clone();
newBlock.find('#target').siblings().remove();

Check out the working code at:

JSFiddle

Answer 3

尝试这个

$('div.block').not('#target').remove()

Answer 4

演示

$('.block #target').nextAll().remove();