Вернуть местоположение XPath с помощью jQuery? Нужен отзыв о функции

Question

Для следующего проекта я буду использовать PHP и jQuery.

У меня есть следующий код:

$('*').onclick(function(){

});

Как только пользователь нажимает на элемент, я хочу, чтобы он возвращал местоположение XPath этого элемента.

То, что я хочу сделать по сути, это своего рода система фильтрации с небольшой помощью jQuery.

PHP извлечет документ из внешнего источника с помощью PHP, используя jQuery, когда пользователь щелкает элемент / соответствующие части этого документа. Эта функция jQuery будет возвращать местоположение XPath, в котором пользователь щелкнул и которое хранится и связывается с этим документом.

В будущем, если этот документ будет обновлен, используя XPath, PHP будет извлекать только XPath, который был выбран пользователем ранее, а не весь документ.

Мне понадобится эта функция jQuery, чтобы также возвращать атрибуты элемента, такие как заголовок в <p> или href-местоположении в привязке.

Короче говоря: мой вопрос, возможно ли это даже в jQuery? Возвращать местоположение XPath выбранного элемента вместе с его атрибутами? Я понятия не имею, как это будет выглядеть в jQuery, поэтому любая помощь будет оценена.

Любые другие дополнительные отзывы тоже были бы хороши. Насколько я знаю, я мог использовать не те инструменты ... или что-то в этом роде. Спасибо.

Answer 1

Вы можете использовать метод .parents(), чтобы получить всех предков выбранного элемента.

$(document).delegate('*','click',function(){
  var path = $(this).parents().andSelf();
  return false;
});

, а затем извлечь необходимую информацию.

Используйте метод .delegate для обработки события, поэтому вам не нужно прикреплять его ко всем элементам.А также используйте метод .andSelf(), чтобы включить в путь и элемент, по которому щелкнули.

---

Более полный пример

$(document).delegate('*','click',function(){
    var path = $(this).parents().andSelf();
    var xpath='/';
    for (var i = 0; i < path.length; i++)
    {
        var nd = path[i].nodeName.toLowerCase();
        xpath += '/';
        if (nd != 'html' && nd != 'body')
        {xpath += nd+'['+ ($(path[i-1]).children().index(path[i])+1) +']';}
        else
        {xpath += nd;}                    
    }
    alert(xpath);
    return false;
});

Примерс тестовым html для воспроизведения на http://www.jsfiddle.net/gaby/hsv97/1/

---

с обновлением id и class, также показанным: http://www.jsfiddle.net/gaby/hsv97/2/

Answer 2

исправление для Gaby aka G. Petrioli

добавлено "nd" детям

.children(nd)

full:

$(document).delegate('*','click',function(){
        var path = $(this).parents().andSelf();
        var xpath=''; // firebug xpath starts with '/html'
        for (var i = 0; i < path.length; i++) {
            var nd = path[i].nodeName.toLowerCase();
            if (nd =="tbody") continue;  // php DOMxpath ignores tbody? or browser fixes html?
            xpath += '/';
            if (nd != 'html' && nd != 'body')
            {xpath += nd+'['+ ($(path[i-1]).children(nd).index(path[i])+1) +']';} //! saving time ha?
            else
            {xpath += nd;}                    
        }
        alert(xpath);
        return false;
    });