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

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

只是想玩这个“插件” - 使用@user113716's technique，只是减少了代码大小。

$.fn.findShallowest = function( selector ) {
    var children = this.children(),
        matching = children.filter( selector );
    // return an empty set if there are no more children
    if ( !children.length ) {
        return children;
    }
    // if anything matches, return the first.
    if ( matching.length ) {
        return matching.first();
    }
    // check grand-children
    return children.findShallowest( selector );
};

试试jsFiddle

Answer 2

这是另一种方法。这个想法是您获得具有最少祖先数量的匹配元素：

(function($) {
    $.fn.nearest = function(selector) {
        var $result = $();
        this.each(function() {
            var min = null,
                mins = {};
            $(this).find(selector).each(function() {
                var n_parents = $(this).parents().length,                
                if(!mins[n_parents]) {
                     mins[n_parents] = this;
                     min = (min === null || n_parents < min) ? n_parents : min;
                }              
             });
             $result = $result.add(mins[min]);
       });

       return $result;
    };
}(jQuery));

用法：

$('selected').nearest('input');

DEMO

findShallowest，as @patrick has it，可能是一个更好的方法名称；）

Answer 3

如果我理解您的问题，您需要递归地检查子节点是否有该类的元素。

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/

---

编辑：忘记了 return 语句，并且有一个 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() );

Answer 4

您追求的是广度优先搜索而不是深度优先搜索（jQuery 的 find() 使用的）。快速谷歌发现：http://plugins.jquery.com/project/closestChild

可以这样使用：

$(...).closestChild('input')

Answer 5

鉴于您的标记，以下是否可行？

$('.selected div > input:first')

Answer 6

如果你不知道底层元素的类名，你总是可以使用类似

$('.unknown-number-of-wrapper-panels').children().last();