глубина ребенка в DOM

Question

Могу ли я иметь какой-либо способ узнать, какая глубина ребенка основана на контейнере. Пример:

<div id="dontainer"> 
    <ul> 
     <li>1</li> 
     <li>2</li> 
     <li id="xelement">3</li> 
     <li>4</li> 
     <li>5</li> 
    </ul> 
</div> 

Вы должны получить 2 для "XElement" (принимая, как, начиная с 0). Зная, что «ли» находятся на одном уровне.

Благодаря

Answer 1

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

function depth(parent, descendant) { 
    var depth = 0; 
    var el = $(descendant); 
    var p = $(parent)[0]; 
    while (el[0] != p) { 
    depth++; 
    el = el.parent(); 
    } 
    return depth; 
} 

// Example call: 
depth(".mainContent", "li") 

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

В качестве альтернативы, и только если вы поддерживаете ES5 и выше, работая непосредственно с узлами DOM может устранить зависимость от JQuery:

function depth(parent, descendant) { 
    var depth = 0; 
    while (!descendant.isEqualNode(parent)) { 
     depth++; 
     descendant = descendant.parentElement; 
    } 
    return depth; 
} 

// Example call: 
depth(document.querySelector('.mainContent'), document.querySelector('li')) 

Answer 2

$.fn.depth = function() { 
    return $(this).parents().length; 
}; 

или что-то подобное.

Answer 3

Простая рекурсивная функция, то вдоль линий: (Хотя я рекомендуется использовать инструментарий, это хорошая маленькая обучающая игра, ошибки фиксацией с оставляется в качестве упражнения для читателей)

 
function countDepth(node, stopPredicate, count) { 
    count = count || 0 
    stopPredicate = stopPredicate || function() {} 
    if (stopPredicate(node) || !node.parentNode) { 
    return count 
    } 
    return countDepth(node.parentNode, stopPredicate, count + 1) 
} 

var depth = countDepth(document.getElementById("xelement"), function (node) { 
    return "dontainer" == node.id 
}) 

// or, with no predicate -- will count *full* depth 
// depth = countDepth(document.getElementById("xelement")) 

alert(depth) 

Edit:. Если вы используете JQuery, смотрите функцию ближайшего().