オブジェクト参照によってコンテナ内の要素のインデックスを見つける必要があります。奇妙なことに、私は簡単な方法を見つけることができません。jQuery は使用しないでください - DOM のみです。
UL
LI
LI
LI - my index is 2
LI
はい、各要素に ID を割り当て、すべてのノードをループして ID を一致させることはできますが、それは悪い解決策のようです。もっといいものはないの？
上記の例のように、3 番目の LI へのオブジェクト参照があるとします。インデックス 2 であることをどのように確認できますか?
ありがとう。
を利用することができます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>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;
}
要素だけの場合、これを使用して、兄弟要素の中から要素のインデックスを見つけることができます。
function getElIndex(el) {
for (var i = 0; el = el.previousElementSibling; i++);
return i;
}
previousElementSiblingIE<9 ではサポートされていないことに注意してください。
これを使用して、要素のインデックスを見つけることができます。
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]));
}
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>
<li>のsを繰り返し処理し<ul>、適切なものが見つかったら停止することができます。
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;
}
}
}
これをコンパクトに書きたい場合、必要なのは次のとおりです。
var i = 0;
for (;yourElement.parentNode[i]!==yourElement;i++){}
indexOfYourElement = i;
親ノードの要素を循環し、要素が見つかったら停止します。
次のことも簡単にできます。
for (;yourElement.parentNode.getElementsByTagName("li")[i]!==yourElement;i++){}
それがあなたが見たいすべての場合。
基本的なループとインデックス チェックを使用した別の例
HTML
<ul id="foo">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
JavaScript は onload/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;
}
実行例
オブジェクト参照を次の関数に渡すだけで、インデックスが取得されます
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);
}
}
}
}
}