javascript - 通过包含字符串的名称获取对象索引

Question

我有一个用 jQuery toArray() 方法制作的 JS 数组，其中包含 div 中的所有 li 元素。现在我尝试获取包含某个字符串的数组的索引:showing。

我尝试过 .index、.filter，但它们都给了我相同的错误消息，

arraySlides.index is not a function
logic.js:218 Uncaught TypeError: showing is not a function

这是我的数组:

[li.slide.showing, li.slide, li.slide]
0:li.slide.showing
1:li.slide
2:li.slide
length:3
__proto__:Array(0)

是不是因为我尝试查找字符串而不起作用？

var current = arraySlides.index('showing');

好吧，也许我没说清楚。我正在尝试获取索引，因此类名包含的数组中的位置显示了一个数字..

Answer 1

我不相信您看到过滤器不是函数。您可能看到的内容更像是showing is not a function。

[].filter('showing')

那是因为filter接受谓词函数。您需要传递一个为您想要的项目返回 true 的函数。这可能是您想要的:

let listItems = $('li').toArray();
let showing = listItems.filter(li => li.classList.contains('showing'));
console.log(showing);

// Or if you want to get it out of the array
console.log(showing[0]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>hidden</li>
  <li>hidden</li>
  <li class="showing">showing</li>
  <li>hidden</li>
  <li>hidden</li>
</ul>

用 ES5 重写:

var listItems = $('li').toArray();
var showing = listItems.filter(function(li) {
  return li.classList.contains('showing');
});
console.log(showing);

// Or if you want to get it out of the array
console.log(showing[0]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>hidden</li>
  <li>hidden</li>
  <li class="showing">showing</li>
  <li>hidden</li>
  <li>hidden</li>
</ul>

如果你想要某个元素的索引，可以使用 findIndex它还采用谓词方法:

var listItems = $('li').toArray();
var showingIndex = listItems.findIndex(function(li) {
  return li.classList.contains('showing');
});
console.log(showingIndex);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>hidden</li>
  <li>hidden</li>
  <li class="showing">showing</li>
  <li>hidden</li>
  <li>hidden</li>
</ul>