Sélectionnez la plus profonde de l'enfant en jQuery

Est-il une méthode peu coûteuse pour sélectionner la plus profonde de l'enfant d'un élément ?

Exemple:

<div id="SearchHere">
  <div>
    <div>
      <div></div>
    </div>
  </div>
  <div></div>
  <div>
    <div>
      <div>
        <div id="selectThis"></div>
      </div>
    </div>
  </div>
  <div>
    <div></div>
  </div>
</div>
  • Pas une critique, mais je suis fasciné par pourquoi vous voulez?
  • Pour tous ceux qui sont à la recherche de ce à travers les moteurs de recherche, j'ai mis à jour l'essentiel de jonathan avec la version améliorée de patrick dw. Également élargi les instructions un peu. Vous pouvez le trouver ici: jQuery plus profond plugin gist
InformationsquelleAutor fehrlich | 2010-09-24
  1. 28

    EDIT: C'est probablement une meilleure approche que ma réponse originale à cette question:

    Exemple: http://jsfiddle.net/patrick_dw/xN6d5/5/

    var $target = $('#SearchHere').children(),
    $next = $target;

while( $next.length ) {
  $target = $next;
  $next = $next.children();
}

alert( $target.attr('id') );

    ou ce qui est même un peu plus court:

    Exemple: http://jsfiddle.net/patrick_dw/xN6d5/6/

    var $target = $('#SearchHere').children();

while( $target.length ) {
  $target = $target.children();
}

alert( $target.end().attr('id') ); //You need .end() to get to the last matched set

    Réponse originale à cette question:

    Cela semble fonctionner:

    Exemple: http://jsfiddle.net/xN6d5/4/

    var levels = 0;
var deepest;

$('#SearchHere').find('*').each(function() {
    if( !this.firstChild || this.firstChild.nodeType !== 1  ) {
        var levelsFromThis = $(this).parentsUntil('#SearchHere').length;
        if(levelsFromThis > levels) {
            levels = levelsFromThis;
            deepest = this;
        }
    }
});

alert( deepest.id );

    Si vous savez que le plus profond sera un certain tag (ou autre chose), vous pouvez l'accélérer en remplacement de .find('*') avec .find('div') par exemple.

    EDIT: mis à Jour pour seulement vérifier la longueur si l'élément en cours n' pas ont un firstChild ou si il le fait, que la firstChild n'est pas un type de noeud 1.

    • Génial! Fonctionne parfaitement! J'ai également encapsulé ce dans un plugin jQuery. Ici: gist.github.com/714851
    • Mise à jour de ma réponse avec ce qui est probablement le plus efficace version.
    • J'ai fait encore une version plus courte jsfiddle.net/xN6d5/44 🙂
    • J'ai créé un plus robuste jQuery plugin: .le plus profond() sur la base de l'original de la réplique qui fonctionne juste aimé que vous attendez, en retournant une collection de la plus profonde des enfants de chaque élément dans l'ensemble d'éléments qui correspondent, éventuellement filtrées par un sélecteur. Il est entièrement chainable et respecte le .end() méthode. Voir sur CodePen, JSFiddle, Résumé
    InformationsquelleAutor user113716
  2. 5

    Voici une légère amélioration sur la réponse de @user113716, cette version gère le cas quand il n'y a pas d'enfants et renvoie la cible elle-même.

     (function($) {

    $.fn.deepestChild = function() {
        if ($(this).children().length==0)
            return $(this);

        var $target = $(this).children(),
        $next = $target;

        while( $next.length ) {
          $target = $next;
          $next = $next.children();
        }

        return $target;
    };

}(jQuery));
    • +1, parce que j'ai juste eu à copier/coller pour obtenir exactement ce dont j'ai besoin, obtenir l'objet imbriqué ou tout simplement de l'objet initial. Merci!
    InformationsquelleAutor russellfeeed
  3. 3

    Je ne pense pas que vous pouvez le faire directement, mais vous pouvez essayer

    var s = "#SearchHere";
while($(s + " >div ").size() > 0)
    s += " > div";
alert( $(s).attr('id') );
    InformationsquelleAutor Loïc Février
  4. 1

    Ce chainable one-liner qui a travaillé pour moi, mais il suppose qu'il existe une seule feuille nœud dans la hiérarchie ci-dessous.

    jQuery("#searchBeginsHere")
  .filter(function(i,e){ return jQuery(e).children().size() === 0; })
    InformationsquelleAutor Mike Smullin
  5. 0

    Version afin d'obtenir le plus profond, pour chaque feuille.

    http://jsfiddle.net/ncppk0zw/14/

    var found = $('#SearchHere *');

for (var i = 0; i < found.length; i++) {
    if (i > 1) {
        if (found[i].parentNode !== found[i-1]) {
            //Deepest. Next element is other leaf
            console.log(found[i-1]);
            continue;
        }
        if (i == found.length-1) {
            //Deepest. Last element in DOM tree
            console.log(found[i]);
        }
    }
}
    InformationsquelleAutor Dmitry
  6. 0

    Cela permettra de trouver le plus profond de l'élément de type "param" sur la page. Utile si vous êtes à la recherche pour le plus profond , ou quoi que ce soit.

    function deepest_child(param) {
    var element_list = $(param)
    var depth = 0
    var deepest_element
    element_list.each(
        function (index) {
            this_depth = $(this).parents().length
            if (this_depth > depth) {
                depth = this_depth 
                deepest_element= $(this)
            }
        })  
    return deepest_element
}
    InformationsquelleAutor talkingtoaj