如何使用javascript獲取html元素的子索引

我正在嘗試獲取其父項的子項索引。例如： -如何使用javascript獲取html元素的子索引

<div> 
    <table> 
     <tr id="rahul"> 
      <td> Hi this is ABC </td> 
      <td> Hi this is XYZ </td> 
     </tr> 
    </table> 
</div>

而且我的Java腳本代碼是： -

<script> 
    $(document).ready(function() { 
     document.onmousedown = mouseDown; 
     function mouseDown(e) { 
      var element = document.elementFromPoint(e.clientX,e.clientY); 
      console.log("Clicked element is:" + element.tagName); 
      var i=1; 
      while (element.nextSibling != null) { 
       element = element.nextSibling; 
       console.log('Sibling No:' + (i++) + " " + element.tagName); 
      } 
     } 
    }); 
</script>

當我按照我的「你好，這是ABC」點擊，它應打印

Sibling No.1 TD

但實際上它是印刷

Clicked element is:TD jsoupTest.html:10 
Sibling No:1 undefined jsoupTest.html:14 
Sibling No:2 TD jsoupTest.html:14 
Sibling No:3 undefined

爲什麼這會打印未定義爲TD的兄弟？我的想法是找到單擊元素的兄弟姐妹的號碼，我可以找出其父母的孩子總數。因此，現在我可以通過從其父項的子項中減去同級項目的數目來找到所點擊元素的索引。

請告訴我是否有更好的選擇來獲得這個。

來源

2012-06-14 sachinjain024

當你正在使用jQuery（我推斷這來自'$（document）.ready（...）'），我已經爲您的問題添加了jQuery標籤 - 因爲它會顯着影響答案。（例如：這是jQuery的一行，不包含多行） –

由於'td'元素節點之間（以及最後一個節點之後），你會得到'undefined'，這裏有一個文本節點（包含空白字符）而文本節點沒有標籤名稱。使用'element.nodeName'代替，你會看到。 –

Thanks T.J.Crowder :) – sachinjain024

如果你想知道什麼是指數的子元素是相對於它的兄弟元素，jQuery的可以通過index爲你做的（見進一步下跌，如果你要考慮非元素節點）：

$(document).ready(function() { 
    document.onmousedown = mouseDown; 
    function mouseDown(e) { 
     var element = document.elementFromPoint(e.clientX,e.clientY); 
     console.log("Clicked element is:" + element.tagName); 
     console.log("Index: " + $(element).index()); 
    } 
});

Live example | source

請注意，只考慮元件，而不是其他類型的節點（特別是text nodes），其可以在那裏。這可能是大約90％的時間，可能更多。 :-)如果你真的要考慮其他節點類型，而不僅僅是元素，用$.inArray(element, $(element).parent().contents())而不是$(element).index()，例如：

$(document).ready(function() { 
    document.onmousedown = mouseDown; 
    function mouseDown(e) { 
     var element = document.elementFromPoint(e.clientX,e.clientY); 
     console.log("Clicked element is:" + element.tagName); 
     console.log("Index: " + $.inArray(element, $(element).parent().contents())); 
     // ^--- this is the only line that changed 
    } 
});

Live copy | source

附註：我相當肯定，你可以取代你行

var element = document.elementFromPoint(e.clientX,e.clientY);

...與

var element = e.target;

...作爲target將根據最頂端的元素按下按鈕時的鼠標。

來源

2012-06-14 11:19:14

'$（element）.index（）'足夠了。 –

@ FelixKling：謝謝。 –

@FelixKling你應該把它放在自己的答案。 – dslh

首先，您應該使用click事件而不是mousedown。然後，您不應該使用on<event> -property，但添加偵聽器的正確方法是，jQuery（您已經加載）提供了一種簡單且跨瀏覽器的方式。

接下來，不要使用document.elementFromPoint與鼠標事件的座標 - 只需使用事件的target屬性。

$(document).on("click", function(e) { 
    var element = e.target; 
    ... 
});

然後，你的循環：

 var i=1; 
     while (element.nextSibling != null) { 
      element = element.nextSibling; 
      console.log('Sibling No:' + (i++) + " " + element.tagName); 
     }

此代碼打印element後的所有兄弟姐妹。這似乎不是你想要的。你想在它之前計算兄弟姐妹，對吧？然後使用.previousSibling。

此外，它包含文本節點，爲其nodeName記錄undefined。爲了解決這個問題，你可以使用[previous|next]ElementSibling。

...找出孩子總不其父已

哦，那是一個很容易的任務：

element.parentNode.children.length; 
// or even 
element.parentNode.childElementCount; 
// to include text nodes: 
element.parentNode.childNodes.length;

來源

2012-06-14 11:30:40 Bergi

我剛剛遇到了這個現在，發現你的答案真的很酷..驚訝爲什麼我沒有早點上調......謝謝:) – sachinjain024

如何使用javascript獲取html元素的子索引

回答

相關問題