выберите самого глубокого ребенка в jQuery

есть ли метод cheep для выбора самого глубокого потомка элемента?

Пример:

<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>
 user78950108 июн. 2011 г., 17:54
Для всех тех, кто находит это через поисковые системы, я обновил суть от Джонатана с улучшенной версией от Патрика Д.В. Также немного расширил инструкции. Вы можете найти это здесь:JQuery самый глубокий плагин суть
 David Thomas24 сент. 2010 г., 16:26
Это не критика, но я очарован тем, почему ты хочешь?

Ответы на вопрос(6)

Этот цепной однострочный работал для меня, но он предполагает, что в иерархии ниже есть только один листовой узел.

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

Вот небольшое улучшение ответа от @ user113716, эта версия обрабатывает случай, когда нет дочерних элементов, и возвращает саму цель.

 (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));
 Georgio03 окт. 2016 г., 20:08
+1, потому что мне просто нужно было скопировать / вставить, чтобы получить именно то, что мне нужно, получить вложенный объект или просто начальный объект. Поблагодарить!
Решение Вопроса

РЕДАКТИРОВАТЬ: Это, вероятно, лучший подход, чем мой первоначальный ответ:

Пример: 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') );

или это еще немного короче

Пример: 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

Оригинальный ответ:

Казалось бы, это работает:

Пример: 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 );

Если вы знаете, что самым глубоким будет определенный тег (или что-то еще), вы можете ускорить его, заменив.find('*') с.find('div') например.

РЕДАКТИРОВАТЬ: Обновлен только для проверки длины, если текущий элементне иметьfirstChild или если это так, то firstChild не является узлом типа 1.

 user11371625 нояб. 2010 г., 13:23
@jonathanconway - Обновил мой ответ с помощью более эффективной версии.
 Jonathan25 нояб. 2010 г., 04:28
Потрясающие! Работает отлично! Я также заключил это в плагин jQuery. Вот:gist.github.com/714851
 gfullam06 мая 2015 г., 20:13
Я создал более надежныйПлагин jQuery: .deepest () основываясь на исходном ответе, который работает так, как вы ожидаете, возвращая коллекцию самых глубоких потомков каждого элемента в наборе соответствующих элементов, необязательно фильтруемых селектором. Это полностью цепной и уважает.end() метод. Посмотреть наCodePen, JSFiddle, Суть
 EaterOfCode21 янв. 2013 г., 16:24
@ user113716 я сделал еще более короткую версиюjsfiddle.net/xN6d5/44 :)

Версия, чтобы получить самый глубокий для каждого листа.

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]);
        }
    }
}

Это найдет самый глубокий элемент типа «param» на странице. Полезно, если вы ищете самое глубокое или что-то еще.

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
}

Я не думаю, что вы можете сделать это напрямую, но вы можете попробовать

var s = "#SearchHere";
while($(s + " >div ").size() > 0)
    s += " > div";
alert( $(s).attr('id') );

Ваш ответ на вопрос