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

var selected = $('.selected');


var result = findShallowest(selected, ':text');


alert(result ? result.val() : null);