I'm trying to make a Jquery plugin (findFirst()) to find the first child with a given characteristics (something in the middle of the find() and children() functions. For instance, given this markup:

<div id="start">
    <div>
        <span>Hello world</span>
        <ul class="valid-result"> ... </ul>
        <ul class="valid-result">
            <li>
                <ul class="not-a-result"> ... </ul>
            </li>
        </ul>
        <div>
            <ul class="valid-result"> ... </ul>
        </div>
    </div>
</div>

If you ask for $("#start").findFirst('ul') it should return all ul lists that I have tagged with the valid-result class, but not the ul with class not-a-result. It is, this function has to find the first elements that matches with a given selector, but not the inner elements that match this selector.

This is the first time I try to code a Jquery function, and what I've already read doesn't helps me too much with this. The function I have developed is this:

jQuery.fn.findFirst = function (sel) {
    return this.map(function() {
        return $(this).children().map(function() {
            if ($(this).is(sel)) {
                return $(this);
            } else {
                return $(this).findFirst(sel);
            }
        });
    });
} 

It works in the sense it tries to return the expected result, but the format it returns the result is very rare for me. I suppose the problem is something I don't understand about Jquery. Here you have the JFiddle where I'm testing.

EDIT

The expected result after $("#start").findFirst('ul') is a set with all UL that have the class 'valid-result' BUT it's not possible to use this class because it doesn't exist in a real case (it's just to try to explain the result).

This is not equivalent to first(), because first returns only one element!