JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">
<div class="selected"> <!-- already have this -->
    <div class="unknown-number-of-wrapper-panels">
        ...
        <div class="collection">    
            <div class="child">
                <input type="text" value="2" /> <!-- don't want this -->
            </div>
        </div>
        <input type="text" value="this one!!!" /> <!-- need this -->
        <input type="text" value="2" />
        ...
    </div>
</div>

JavaScript

(function($) {
    $.fn.findShallowest = function( sel) {
        return findShallowest( this, sel );
    };
    function findShallowest(root, sel) {
        var children = root.children();
        if (children.length) {
            var matching = children.filter(sel);
            if (matching.length) {
                return matching.first();
            } else {
                return findShallowest(children, sel);
            }
        } else {
            return $();
        }
    }
})(jQuery);

var result = $('.selected').findShallowest( ':text' );


alert( result.val() );