web-dev-qa-db-ja.com

JavaScript DOM：コンテナ内の要素インデックスの検索

オブジェクト参照により、コンテナ内の要素のインデックスを見つける必要があります。奇妙なことに、私は簡単な方法を見つけることができません。 jQueryは使用しないでください-DOMのみ。

UL
 LI
 LI
 LI - my index is 2
 LI

はい、各要素にIDを割り当て、すべてのノードをループしてIDを一致させることはできますが、それは悪い解決策のようです。もっといいものはありませんか？

したがって、上記の例のように、3番目のLIへのオブジェクト参照があるとします。インデックス2であることをどのように確認できますか？

ありがとう。

javascripthtmldomparent-child
63
Vad

Array.prototype.indexOfを使用できます。そのためには、HTMLNodeCollectionを真のArrayにいくぶん「キャスト」する必要があります。例えば：

var nodes = Array.prototype.slice.call( document.getElementById('list').children );

その後、次のように呼び出すことができます。

nodes.indexOf( liNodeReference );

例：

var nodes = Array.prototype.slice.call( document.getElementById('list').children ),
    liRef = document.getElementsByClassName('match')[0];

console.log( nodes.indexOf( liRef ) );
<ul id="list">
    <li>foo</li>
    <li class="match">bar</li>
    <li>baz</li>    
</ul>
76
jAndy

2017年の更新

以下の元の答えは、OPが空ではないテキストノードおよびその他のノードタイプと要素を含めることを想定していることを前提としています。これが妥当な仮定であるかどうかという質問からは、今ははっきりしていません。

代わりに要素のインデックスだけが必要であると仮定すると、previousElementSiblingはよくサポートされ（2012年にはそうではありませんでした）、今では明らかな選択です。次の（これは他のいくつかの回答と同じです）は、IE <= 8を除くすべてのメジャーで機能します。

function getElementIndex(node) {
    var index = 0;
    while ( (node = node.previousElementSibling) ) {
        index++;
    }
    return index;
}

元の回答

previousSiblingが見つかるまで、nullを使用します。空白のみのテキストノードを無視することを想定しています。他のノードをフィルタリングする場合は、それに応じて調整します。

function getNodeIndex(node) {
    var index = 0;
    while ( (node = node.previousSibling) ) {
        if (node.nodeType != 3 || !/^\s*$/.test(node.data)) {
            index++;
        }
    }
    return index;
}
43
Tim Down

これが私が行う方法です（2018 version？）：

const index = [...el.parentElement.children].indexOf(el);

タダアァァム。そして、生のテキストノードも検討したい場合は、代わりにこれを行うことができます：

const index = [...el.parentElement.childNodes].indexOf(el);

HTMLCollectionであるため、子を配列に分散します（したがって、indexOfでは機能しません）。

Babelを使用していること、またはブラウザーのカバレッジが達成する必要があることに対して十分であることを注意してください（基本的には背後のArray.fromであるスプレッド演算子についての考え）。

22
Julien BONNIN
Array.prototype.indexOf.call(this.parentElement.children, this);

または、letステートメントを使用します。

13
Alexander Abashkin

ちょうど要素の場合、これを使用して、兄弟要素の中から要素のインデックスを見つけることができます。

function getElIndex(el) {
    for (var i = 0; el = el.previousElementSibling; i++);
    return i;
}

IE <9ではpreviousElementSiblingはサポートされていないことに注意してください。

9
Web_Designer

これを使用して、要素のインデックスを見つけることができます。

Array.prototype.indexOf.call(yourUl, yourLi)

たとえば、これはすべてのインデックスを記録します。

var lis = yourList.getElementsByTagName('li');
for(var i = 0; i < lis.length; i++) {
    console.log(Array.prototype.indexOf.call(lis, lis[i]));
}​

JSFIDDLE

8
rsplak

最新のネイティブアプローチでは、 'Array.from（）'を使用できます。たとえば、 `

const el = document.getElementById('get-this-index')
const index = Array.from(document.querySelectorAll('li')).indexOf(el)
document.querySelector('h2').textContent = `index = ${index}`
<ul>
  <li>zero
  <li>one
  <li id='get-this-index'>two
  <li>three
</ul>
<h2></h2>

`

2
calipoop

HTMLCollectionから配列を作成する例

<ul id="myList">
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

<script>
var tagList = [];

var ulList = document.getElementById("myList");

var tags   = ulList.getElementsByTagName("li");

//Dump elements into Array
while( tagList.length != tags.length){
    tagList.Push(tags[tagList.length])
};

tagList.forEach(function(item){
        item.addEventListener("click", function (event){ 
            console.log(tagList.indexOf( event.target || event.srcElement));
        });
}); 
</script>
2
berandomsen

これをコンパクトに記述したい場合、必要なものは次のとおりです。

var i = 0;
for (;yourElement.parentNode[i]!==yourElement;i++){}
indexOfYourElement = i;

親ノード内の要素を循環するだけで、要素が見つかったら停止します。

次のことも簡単に行えます。

for (;yourElement.parentNode.getElementsByTagName("li")[i]!==yourElement;i++){}

それがあなたが見通したいすべてであるならば。

1
Ada

<li>内の<ul>sを反復処理し、適切なものが見つかったら停止できます。

function getIndex(li) {
    var lis = li.parentNode.getElementsByTagName('li');
    for (var i = 0, len = lis.length; i < len; i++) {
        if (li === lis[i]) {
            return i;
        }
    }

}

デモ

1
Rocket Hazmat

オブジェクト参照を次の関数に渡すだけで、インデックスが取得されます

function thisindex(Elm) 
{ 
    var the_li = Elm; 
    var the_ul = Elm.parentNode; 
    var li_list = the_ul.childNodes; 

    var count = 0; // Tracks the index of LI nodes

    // Step through all the child nodes of the UL
    for( var i = 0; i < li_list.length; i++ )
    {
        var node = li_list.item(i);
        if( node )
        {
        // Check to see if the node is a LI
            if( node.nodeName == "LI" )
            {
            // Increment the count of LI nodes
                count++;
            // Check to see if this node is the one passed in
                if( the_li == node )
                {
                    // If so, alert the current count
                    alert(count-1);
                }
            }
        }
    }
}
0
Clyde Lobo
    const nodes = Array.prototype.slice.call( el.parentNode.childNodes );
    const index = nodes.indexOf(el);
    console.log('index = ', index);
0
Nguyen Anh Vu

基本的なループとインデックスチェックを使用する別の例

HTML

<ul id="foo">
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

JavaScriptonload/readyを実行するか、ulがレンダリングされた後

var list = document.getElementById("foo"),
    items = list.getElementsByTagName("li");

list.onclick = function(e) {
    var evt = e || window.event,
    src = evt.target || evt.srcElement;
    var myIndex = findIndex(src);
    alert(myIndex);
};

function findIndex( elem ) {
    var i, len = items.length;
    for(i=0; i<len; i++) {
        if (items[i]===elem) {
            return i;
        }
    }
    return -1;
}

実行例

jsFiddle

0
epascarello