32

jQuery apiによると、インデックスを受け入れてDOMノードを返す.get（）の補完的な操作は、DOMノードを取得してインデックスを返す.index()ことができます。ページに単純な順序なしリストがあるとします。

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>

.index()兄弟に関連して、一致した要素のセット内の最初の要素の位置を返します。

alert('Index: ' + $('#bar').index();

リストアイテムのゼロベースの位置を取得します。

Index: 1

知りたいのですが、JavaScriptを使用して同じことを行うにはどうすればよいですか？

4

5 に答える 5

23

あなたはあなた自身の関数を作ることができます：

function indexInParent(node) {
    var children = node.parentNode.childNodes;
    var num = 0;
    for (var i=0; i<children.length; i++) {
         if (children[i]==node) return num;
         if (children[i].nodeType==1) num++;
    }
    return -1;
}

デモンストレーション（コンソールを開く）

于 2012-12-01T09:15:35.073 に答える
17

TextNodesを含まないようにTravisJの回答を変更し、それから関数を作成しました。

コンソールで実行して（stackoverflowで）確認できます。

古典的な方法：

function getNodeindex( elm ){ 
    var c = elm.parentNode.children, 
        i = c.length;
        
    while(i--) 
      if( c[i] == elm ) 
        return i
}

ES2015の場合：

const getNodeindex = elm => [...elm.parentNode.children].findIndex(c => c == elm)

// or

const getNodeindex = elm => [...elm.parentNode.children].indexOf(elm)

デモ：

const getNodeindex = elm => [...elm.parentNode.children].indexOf(elm)
<button onclick="console.log(  getNodeindex(this)  )">get index</button>
<button onclick="console.log(  getNodeindex(this)  )">get index</button>
<button onclick="console.log(  getNodeindex(this)  )">get index</button>

また、同じ問題に関する別のスレッドを指摘したいと思います。これには、すばらしい答えがあります（古いIEサポートを探している人にとって）

于 2016-10-14T21:07:05.417 に答える
5

ループは必要ありません、呼び出しArray#indexOfて.parentElement.childrenください：

const element = document.querySelector('#baz');

[].indexOf.call(element.parentElement.children, element);
// => 2

jQueryの場合と同じように、要素のランダムなリストで呼び出すこともできます。

const list = document.querySelectorAll('li');
const element = document.querySelector('#baz');

[].indexOf.call(list, element);
// => 2
于 2019-03-19T07:18:23.063 に答える
1

この情報は、previousElementSiblingとincrementingを使用してDOMツリーを上に移動することで見つけることができます。

var getElementIndex(element) {
    if (!element) {
        return -1;
    }
    var currentElement = element,
        index = 0;

    while(currentElement.previousElementSibling) {
        index++;
        currentElement = currentElement.previousElementSibling;
    }
    return index
}

getElementIndex(document.getElementById('#bar'));

これがpreviousElementSiblingのブラウザサポートです。

https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling

于 2015-06-19T17:46:43.993 に答える
0

インデックスはこのように見つけることができます

    Array.from(children).findIndex(element => element.id === "bar")
于 2020-08-31T16:48:23.033 に答える