抓取Span元素的一个位置

Question

我试图生成一个我想要打印出来的元素序列给用户。每个span元素都有一个附加到它的功能，点击后会突出显示程序的不同部分。因此，我想要做的是（生成的元素后），可以说，这是我们所拥有的

<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>