在 JS/JQuery 中由 toArray 创建的数组中查找元素的索引

Question

我有一堆类="change"的跨度，每个跨度都有一个唯一的id。我使用以下方法创建了这些跨度的数组：

var changesArray = $('.change').toArray()

我希望能够在单击数组时获取数组中跨度的索引。我试过了：

$('.change').click(function(){
var thisChange = $(this).attr('id');
var thisChangeIndex = $.inArray(thisChange,changesArray);
});

但我得到的只是我点击的每个 .change 的 -1。

我对这种类型的代码有点新手。帮助？

Answer 1

toArray方法说

检索 jQuery 集中包含的所有元素，作为数组。

您正在数组中查找特定id- 这将永远不起作用。

如果需要项目的索引，可以使用.index()

$('.change').click(function(){
var thisChangeIndex = $('.change').index(this);
console.log(thisChangeIndex);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span class="change">change1</span>
<span class="change">change2</span>
<span class="change">change3</span>
<span class="change">change4</span>
</div>
<div>
<span class="change">change5</span>
<span class="change">change6</span>
<span class="change">change7</span>
<span class="change">change8</span>
</div>

Answer 2

您应该只保留唯一 ID 的纯数组：

var changesArrayIds = $('.change').toArray().map(function(x) { return x.id; });

那么这一行应该可以正常工作：

var thisChangeIndex = $.inArray(thisChange, changesArrayIds);

Answer 3

如果您坚持使用.toArray则 http://codepen.io/8odoros/pen/JKWxqz

var changesArray = $('.change').toArray();
$('.change').click(function(){
var thisChange = $(this).attr('id');
var thisChangeIndex = -1;
$.each( changesArray, function( i, val ) {
if( thisChange==val.id)  thisChangeIndex= i;
}); 
console.log(thisChangeIndex);
});

Answer 4

当你调用toArray时，你会得到一个包含所有 DOM 节点的数组，而不是 jquery 对象。您可以在this而不是$(this)上搜索：

var changesArray = $('.change').click(function(){
var thisChangeIndex = $.inArray(this,changesArray);
}).toArray();