How can I choose the "smallest" corresponding child?

Question

How can I choose the first "smallest" input?

My current selection will be the div marked with "selected".
I will not know how many levels it will be.

<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> 

It seems that find().first() gives me the deepest.

Edited for clarity. I need to find it based on the fact that it is smaller, not based on other unique attributes.

Could it be like the flip side of closest() ?

Answer 1

If I understand your problem, you need to recursively check child nodes for elements with this class.

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

Example: http://jsfiddle.net/Qf2GM/

---

EDIT: Forgot the return statement and had an identifier selector instead of a class selector for the initial .selected .

---

Or do it in your own plugin:

Example: 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 2

You are doing a width search, not a depth search (which uses jQuery find ()). A quick google found: http://plugins.jquery.com/project/closestChild

This can be used as follows:

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

Answer 3

Just for golf, this “plugin” is a bit - it uses the @ user113716 technique , it just reduced the code size.

 $.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 ); }; 

Try jsFiddle

Answer 4

This is a different approach. The idea is that you get the corresponding element with the least number of ancestors:

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

Using:

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

Demo

findShallowest , as @patrick has it , may be the best method name;)

Answer 5

If you do not know the class name of the lower level element, you can always use something like

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

Answer 6

Well, given your markup, will there be a next job?

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