如何选择"最浅"的匹配后代？

Question

如何选择第一个"最浅"的输入？

我当前的选择将是标记为"已选择"的div.
我不知道会有多少级别.

<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="2" /> <!-- need this -->
    <input type="text" value="2" />
    ...
  </div>
</div>

它似乎find().first()给了我最深刻的一个.

编辑清晰.我需要根据它较浅而不是基于其他独特属性的事实来找到它.

这可能就像是反过来的closest()？

Answer 1

如果我理解您的问题,您需要以递归方式检查子节点以查找具有该类的元素.

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');

findShallowest( selected, ':text' );

示例: http ://jsfiddle.net/Qf2GM/

编辑:忘记了一个返回语句,并有一个ID选择器而不是初始的类选择器.selected.

或者将它变成你自己的自定义插件:

示例: http ://jsfiddle.net/qX94u/

(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() );