根據DOM中的位置動態生成ID

我需要根據DOM中的級別生成元素值。例如如果我在文檔級別有一個點擊事件（即監聽頁面上的任何點擊）和呈現的HTML，它需要遍歷DOM直到您看到「ID」屬性填充。根據DOM中的位置動態生成ID

<div id="someid"> 
<div> 
    <span> 
     <p> 
      <a href="javascript:void(0);"> 
       <span> 
        <strong>Googlie</strong> 
       </span> 
      </a>     
     </p> 
    </span> 
</div>

當我點擊「Googlie」，它應產生是這樣的： someid__div_span_p_a_span_strong

問題：我確實有一些代碼來做到這一點，但有一個問題，它。在上面，如果我有兩個元素，接下來如下所示。如何爲強元素生成唯一值？我可以擁有一些不使用childNodes位置的東西嗎？如果有人更改元素之間的空白區域，則childNodes值會更改。

...<span> 
<strong>Googlie</strong> <br/> <strong>Bingie</strong>

...

document.onclick = function(obj) { 
    var node = obj.target; 
    var res = []; 
    var etA = ""; 
    res[0] = false; 
    while (!res[0]) { 
     res = GetIdFor(node); 
     if (!res[0]) { 
      var end = node.parentNode.childNodes.length; 
      for (var i = 0; i < end; i++) { 
       var j = node.parentNode.childNodes[i]; 
       if (j.nodeType === 1 && j === node) { 
        break; 
       } 
      } 
      etA = "_" + node.tagName + etA; 
      node = node.parentNode; 
     } 
     else { 
      etA = res[1] + "_" + etA; 
     } 
    } 
    alert(etA); 
}; 
function GetIdFor(elem) { 
    var res = []; 
    res[0] = false; 
    var d = elem.getAttribute("ID"); 
    if (d !== "undefined" && d !== null) { 
     res[0] = true; 
     res[1] = d; 
    } 
    return res; 
}

現在，我知道jQuery的可以幫助這裏不過這不是重點。 :)想法？我沒有其他選擇，只能使用childNodes級別來生成此值嗎？

來源

2012-09-19 Rachit Patel

你想用這個ID實現什麼？ – Oriol

看看這裏：http://stackoverflow.com/questions/5728558/jquery-get-the-dom-path-of-the-clicked-a –

@Oriol。這個想法是獲得該ID，並能夠反向工程，並在某種報告中再次找到，以顯示點擊的位置。謝謝！ –

我改編了這個答案從Here。作者建議將[＃]作爲兄弟數字，以便區分兄弟姐妹，例如someid__div_span_p_a_span_strong [0]

工作jsFiddle Here。

function elementPath(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(".").toLowerCase(); 
} 

$(document).ready(function() { 
    $(document).click(function(e) { 
     e.stopPropagation(); 
     window.alert(elementPath(e.target)); 
    }); 
});

來源

2012-09-19 18:36:55

謝謝AresAvatar！發佈後，我閱讀jQuery選擇器，發現它總是隻返回ElementType節點（值=== 1），而不是其他人，這使得我很容易，而事實上你在你的回答。我選擇這個作爲答案，但我更關注非jQuery方式。我想我實際上得到它產生這樣的結果：__＃someid__TBODY-1_TR-1_TD-2_DIV-1_DIV-2_A-1 其中「-1」是childNodes位置。我的想法是採用這個和逆向工程使用jQuery。但是，謝謝你的幫助！ –

如果您解決問題，請隨時發佈並接受您自己的答案。 –

根據DOM中的位置動態生成ID

回答

相關問題