Как подсчитать глубину дочернего элемента от родителя с помощью xpath?

Question

Используя Selenium, я могу найти дочерний элемент и родительские элементы. Как я могу определить глубину дочернего элемента из указанного родителя?

Вот небольшой пример HTML

<div class="header"> 
    <div></div> 
    <div></div> 
     <div> 
      <ul> 
       <li> 
        <img /> 
       </li> 
      </ul> 
     </div> 
    <div></div> 
    <div></div> 
</div> 

И вот что я XPath использовать, чтобы найти родителя IMG тега.

document.evaluate('../ancestor::div[contains(concat(" ", normalize-space(@class), " "), " header ")]', $('img')[0], null, XPathResult.ANY_UNORDERED_NODE_TYPE, null) 

Итак, теперь я подсчитаю количество элементов между родительским и дочерним элементами, используя xpath. Я знаю метод count в xpath, однако я неопытен в том, как это все еще можно сделать. Результат должен состоять в том, что родительский элемент находится на расстоянии 5 уровней от тега.

Answer 1

Я бы ответил на второй ответ @ benjamind, что это, вероятно, немного отличается от этого в XPath напрямую. Но мы можем использовать небольшой трюк: глубина, которую вы ищете, может быть рассчитана как разница между глубиной тега img с корневым тегом и глубиной родительского тега с корневым тегом. Попробуйте это:

count(ancestor::*) - count(ancestor::div[contains(concat(' ', normalize-space(@class), ' '), ' header ')][1]/ancestor::*) 

Answer 2

Если вы заинтересованы, чтобы сделать это в JavaScript с JQuery, следующие функции должны выполнять работу:

 function getDistanceFromElement(src){ 
      return getDistance(src, 10, 1); 
     } 

     function getDistance(src, maxDepth, distance){ 
      if(maxDepth > 0) { 
       var parent = $(src).parent(); 
       if($(parent).hasClass("header")) { 
        return distance + 1; 
       } else { 
        return getDistance(parent, maxDepth - 1, distance + 1); 
       } 
      } else { 
       return; 
      } 
     } 

С следующего HTML

<div class="header"> 
    <div></div> 
    <div></div> 
     <div> 
      <ul> 
       <li> 
        <img id="my_image"/> 
       </li> 
      </ul> 
     </div> 
    <div></div> 
    <div></div> 
</div> 

, следующий вызов будет отображаться 5:

$(document).ready(function() { 
    var srcImage = $("#my_image"); 

    var d = getDistanceFromElement(srcImage); 
    alert(d); 

}); 

Answer 3

Немного проще, чем подход benjamin.d в $("#my_image").parentsUntil("div[class='header']").length + 1;

Обратите внимание, что + 1 используется для подсчета <div class="header">, а также. Без него эта функция возвращает число элементов, лежащих между проверенными.