web-dev-qa-db-ja.com

DOMノードインデックスの検索

特定のDOMノードのインデックスを見つけたい。それは逆のことのようです

document.getElementById('id_of_element').childNodes[K]

子ノードと親ノードへの参照が既にある場合は、代わりにKの値を抽出します。どうすればいいですか？

javascriptdom
59
timothy

Safari、FireFoxのすべてのバージョンで、フレームワークなしで可能な最短の方法、ChromeおよびIE> = 9：

var i = Array.prototype.indexOf.call(e.childNodes, someChildEl);

104
Matthew Caruana Galizia

少し短く、要素がelemにあると想定し、kを返します。

for (var k=0,e=elem; e = e.previousSibling; ++k);

Justin Dearingからのコメントの後 回答を確認し、次を追加しました：

または、「while」を好む場合：

var k=0, e=elem;
while (e = e.previousSibling) { ++k;}

元の質問は、既存のDOM要素のインデックスを見つける方法でした。この回答の上記の両方の例では、elemがDOM要素であり、その要素がまだDOMに存在することを想定しています。 nullオブジェクトまたはpreviousSiblingを持たないオブジェクトを渡した場合、それらは失敗します。より簡単な方法は、次のようなものです。

var k=-1, e=elem;
while (e) {
    if ( "previousSibling" in e ) {
        e = e.previousSibling;
        k = k + 1;
    } else {
        k= -1;
        break;
    }
}

IfeがnullまたはifpreviousSiblingがオブジェクトの1つにありません。kは-1です。

23
some

RoBorgの答えは機能します...または試してみてください...

var k = 0;
while(elem.previousSibling){
    k++;
    elem = elem.previousSibling;
}
alert('I am at index: ' + k);
4
scunliffe

最新のネイティブアプローチには、Array.from(e.children).indexOf(theChild)が含まれます。

いいえIEサポート、ただしEdgeは動作します： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from =

2
calipoop

元のポスターと同様に、私はしようとしていた

特定のDOMノードのインデックスを見つける

しかし、クリックハンドラーを使用しただけで、兄弟との関係でのみです。私は上記をうまく動作させることができませんでした（疑いなくnoobnessのために、私はelemのために 'this'でサブビングを試みましたが、動作しませんでした）。

私の解決策はjqueryを使用して使用することでした：

var index = $(this).parent().children().index(this);

要素のタイプ、つまり 'h1'やidなどを指定する必要なく機能します。

2
Andrew Plummer

プロトタイプのようなフレームワークを使用すると、これを使用できます：

$(el).up().childElements().indexOf($(el))
0
lezardo

これを行う唯一の方法は、自分が見つかるまで親の子をループすることだと思います。

var K = -1;
for (var i = myNode.parent.childNodes.length; i >= 0; i--)
{
    if (myNode.parent.childNodes[i] === myNode)
    {
        K = i;
        break;
    }
}

if (K == -1)
    alert('Not found?!');
0
Greg