Каков путь в html dom для выбранного элемента?

Я пытаюсь получить путь в html dom для конкретного объекта.
Использование javascript или jquery. (Когда я выбираю/наводил объект над объектом.)

Я заранее не знаю структуру.

Например:

<html>
    <body>
        <div>
            <div>
                Not selected
            </div>
            <div>
                Selected Text
            </div>
        </div>
    </body>
</html>

Путь Div выделенного текста должен выглядеть примерно так:

//HTML/BODY/DIV[0]/DIV[1]

Любая помощь будет оценена.

Я просмотрел этот ответ, но он не дает указания относительно индекса элемента (в моем примере значение в квадратных скобках - 1 в DIV[1]).

Кстати, есть ли "техническое" имя для этого пути?
Я видел термин XPath, но не уверен, что это он.

Будьте счастливы и наслаждайтесь жизнью.

Ответы

Ответ 1

Следующая функция делает то, что вы хотите, используя jQuery:

function getElementPath(element)
{
    return "//" + $(element).parents().andSelf().map(function() {
        var $this = $(this);
        var tagName = this.nodeName;
        if ($this.siblings(tagName).length > 0) {
            tagName += "[" + $this.prevAll(tagName).length + "]";
        }
        return tagName;
    }).get().join("/").toUpperCase();
}

Вы можете использовать его следующим образом:

$(document).ready(function() {
    $("div").click(function(event) {
        event.stopPropagation();
        window.alert(getElementPath(this));
    });
});

Вы можете протестировать его здесь.

Ответ 2

$("html > div")[0].find("div")[1]

XPath больше не доступен в JQuery.

Если вам нужен Xpath, просто используйте Firebug под FF или Chrome.

Относительно выбора anyelemtn (опция):

$("option:selected")

Чтобы получить зависание div:

$("div:hover")

или флажок:

$("checkbox:selected")

Теперь возьмем пример:

<div>
   <div class='again'>
      <select id='select1'>
         <option val='1'>
         <option val='2'>
      </select>


      <select id='select2'>
         <option val='1'>
         <option val='2'>
      </select>
   </div>
</div>

Теперь, как выбрать первый список:

$("#select2 > option:selected")

или

$('.again >select')[0].find("option:selected")

получение зависания div:

('.secondDIv').hover(function(){
},function(){});

и т.д.