[jQuery] Merge JQuery Element Objects

[lowtech]

<ul>
    <li id="foo">
        <ul>
            <li class="bar"></div>
            <li class="bar"></div>
            <li class="bar"></div>
            <li class="bar"></div>
        </ul>
    </li>
</ul>

function getNodes(e) {
    return $.extend(e, $(e).find('li.bar'));
}

var nodes = getNodes($('#foo'));
console.log(nodes);

---------------------

How do I merge these two objects? If I ran a console.log on just "$
(e).find('li.bar')", it would return an object with a length of 3 and
those four elements and if i ran a console.log on just $(e), it would
return a length of 0 and just that element.

Instead I would like to see an object returned with a length of 4 and
the #foo element and all the .bar elements attached.

Please don't worry about the function or why i'm not just calling $
('li#foo, li.bar').