2016-05-05 3 views
0

Я пытаюсь получить местоположение элементов в DOM, когда он щелкнут. Чтобы его можно было использовать для создания на лету стиля для выбранного элемента в области предварительного просмотра.JQuery - получить местоположение элемента в DOM

Например предполагая, у меня есть функция OnClick работает на каждый элемент на странице, когда элемент щелкнуло Я хочу иметь такие значения, как:

div#a > ul.list > li:nth-child(3) > span 

Если пользователь нажмет на третьем пролете в на странице ниже:

<html> 
<body> 
    <div id="a"> 
     <ul class="list"> 
      <li><span>first</span></li> 
      <li><span>second</span></li> 
      <li><span>third</span></li> 
      <li><span>fourth</span></li> 
     </ul> 
    </div> 
</body> 
</html> 

Я искал в Интернете и пробовал несколько старых функций, которые лежали, но никто не работает.

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

$("body *").click(function() { 
    //retrieve current element information 
    //retrieve tag name 
    var tag = $(this).prop("nodeName"); 
    //retrieve id list 
    var ids = $(this).prop("id"); 
    //replace whitespace with hash 
    var ids = ids.replace(/\s/g, "#"); 
    //retrieve class list 
    var classes = $(this).attr("class"); 
    //replace whitespace with point 
    var classes = classes.replace(/\s/g, "."); 
    //add ids and classes to tag name 
    var current_element = tag + "#" + ids + "." + classes; 
}); 

Есть ли лучшие способы?

+1

я не вижу быстрее, чем цикл через каждый родитель. Вы можете использовать [elementsFromPoint] (https://developer.mozilla.org/en-US/docs/Web/API/Document/elementsFromPoint), но он пока не поддерживается всеми браузерами (сафари, на который я смотрю) , и я думаю, что это может быть медленнее. –

+0

Возможный дубликат https://stackoverflow.com/questions/4588119/get-elements-css-selector-when-it-doesnt-have-an-id – flatline

+0

Возможный Dupe: http://stackoverflow.com/questions/5706837/получить уникальный-переключатель-на-элемент-в-JQuery – Riddell

ответ

0

его просто, используя при этом (... ParentNode)

var element = document.getElementById('elem'); 

    element.onclick=function(){ 
    var elem = this, 
     elemPath = ''; 

    while(elem.parentNode){ 
     elemPath += elem.tagName +' > '; 
     elem = elem.parentNode; 
    } 
    alert(elemPath); 
    } 

я надеюсь, что это помогает

Смежные вопросы