Span要素の位置を取得する

Question

ユーザーに印刷したい要素のシーケンスを生成しようとしています。各スパン要素にはクリック機能が付いており、クリックするとプログラムの別の部分が強調表示されます。だから私は何をしたいのか（要素が生成された後）、これは我々が持っているものであると言うことができますです

<div id = "sequence label"> 
    <span>K</span> 
    <span>L</span> 
    <span>A</span> 
    <span>S</span> 
    <span>G</span> 
</div> 

私は、リスト内の別の指標でそれをクリックしたときに何とかスパンのインデックスをつかみ、対応を考えていた

data = [2, 3, 4, 5, 6] 

はそう最初の要素をつかむ[0]私のデータが得られます[2]：そう言うことができます。

Answer 1

あなたはjQueryの.index()機能を使用することができます

var data = [2, 3, 4, 5, 6]; 
 
$("span").click(function() { 
 
    var index = $(this).index(); 
 
    console.log(data[index]); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <span>K</span> 
 
    <span>L</span> 
 
    <span>A</span> 
 
    <span>S</span> 
 
    <span>G</span> 
 
</div>

Answer 2

jQueryのない溶液は次のようになります。

var spans = document.querySelectorAll('span'); 
 

 
for (var i = 0; i < spans.length; i++) { 
 
    spans[i].addEventListener('click', function() { 
 
     for (var el = this, index = 1; el = el.previousSibling; index += el.tagName === 'SPAN'); 
 
     console.log('You clicked span number ' + index); 
 
    }); 
 
}

<div id = "sequence label"> 
 
    <span>K</span> 
 
    <span>L</span> 
 
    <span>A</span> 
 
    <span>S</span> 
 
    <span>G</span> 
 
</div>

それとも、クリックハンドラの引数としてインデックスを結合するであろう：だから

var spans = document.querySelectorAll('span'); 
 

 
for (var i = 0; i < spans.length; i++) { 
 
    spans[i].addEventListener('click', function(index) { 
 
     console.log('You clicked span number ' + index); 
 
    }.bind(spans[i], i+1)); 
 
}

<div id = "sequence label"> 
 
    <span>K</span> 
 
    <span>L</span> 
 
    <span>A</span> 
 
    <span>S</span> 
 
    <span>G</span> 
 
</div>