根據標簽類型獲取頁面中元素的索引

Question

我想在單擊時獲取頁面中每個元素的索引。 但要點是，索引不應該是項目的常規索引，而應該基於標簽的類型。

例如，請考慮以下示例。 我提供了我正在獲取的當前值以及預期的輸出。

<div>First Div</div> <!-- This shows 0 (as required) -->
<div>Second Div</div> <!-- This shows 1 (as required) -->
<div>Third Div</div> <!-- This shows 2 (as required) -->
<div>
    <p>First Para</p> <!-- This shows 0 (as required) -->
    <p>Second Para</p> <!-- This shows 1 (as required) -->
    <span>First Span</span> <!-- This shows 2 but I need it as 0 -->
    <br/>
    <span>Second Span</span> <!-- This shows 4 but I need it as 1 -->
</div>
<p>Third Para</p> <!-- This shows 4 but I need it as 2-->
<span>Third Span</span> <!-- This shows 5 but I need it as 2 -->

以下是到目前為止我嘗試過的代碼。 應該如何修改以滿足我的要求？

$(document).on("click", "*", function (e) {
   e.stopPropagation();
   index = $(this).index();
   console.log(index); 
});

這是帶有當前代碼的JSFiddle 。

Answer 1

您當前的代碼正在獲取每個標簽相對於其父標簽的索引。 您需要進行如下修改，以根據標記類型獲取當前單擊元素的索引。

index = $(this.tagName).index(this);

小提琴