Come posso selezionare il discendente corrispondente “più superficiale”?

Come posso selezionare il primo input “superficiale”?

La mia attuale selezione sarà il div contrassegnato come “selezionato”.
Non saprò quanti livelli saranno giù.

...
...

Sembra come find().first() mi dà il più profondo.

Modificato per chiarezza. Ho bisogno di trovarlo basato sul fatto che è meno profondo, non basato su altri attributi unici.

Questo potrebbe essere come un rovescio del closest() ?

Se capisco il tuo problema, devi controllare in modo ricorsivo i nodes figli per gli elementi con quella 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' ); 

Esempio: http://jsfiddle.net/Qf2GM/


EDIT: aveva dimenticato un’istruzione return e aveva un selettore ID invece di un selettore di class per l’iniziale .selected .


O fallo nel tuo plugin personalizzato:

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

Stai cercando una ricerca in ampiezza anziché la ricerca in profondità (utilizzata da jQuery find ()). Un rapido google ha trovato: http://plugins.jquery.com/project/closestChild

Questo potrebbe essere usato in questo modo:

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

Solo per giocare a golf questo “plugin” un po ‘- la tecnica di Uses @ user113716 , ha appena ridotto le dimensioni del codice.

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

Prova su jsFiddle

Questo è un altro approccio. L’idea è di ottenere l’elemento corrispondente con il minor numero di antenati:

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

Uso:

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

DEMO

findShallowest , come lo ha @patrick , potrebbe essere un nome di metodo migliore;)

Se non conosci il nome della class dell’elemento di livello inferiore, puoi sempre usare qualcosa di simile

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

Bene dato il tuo markup, sarebbe il seguente lavoro?

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