Question

console.log($('li.pagination').index('[data-page=5]'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="pagination active" data-page="0"><a href="#">1</a></li>
<li class="pagination active" data-page="1"><a href="#">2</a></li>
<li class="pagination active" data-page="2"><a href="#">3</a></li>
<li class="pagination active" data-page="3"><a href="#">4</a></li>
<li class="pagination active" data-page="4"><a href="#">5</a></li>
<li class="pagination active" data-page="5"><a href="#">6</a></li>
<li class="pagination active" data-page="6"><a href="#">7</a></li>
<li class="pagination active" data-page="7"><a href="#">8</a></li>
<li class="pagination active" data-page="8"><a href="#">9</a></li>
<li class="pagination active" data-page="9"><a href="#">10</a></li>

任何人都可以告诉我为什么它返回-1而不是索引如何解决这个问题？

Answer 1

jquery中index()方法的主要目的是从匹配的元素中搜索给定元素。

因此，在您的情况下，您将使用选择器字符串而不是jquery对象作为索引方法的参数

您可以通过将选择器封装到$() mehod

中来使选择器成为jquery对象

如果没有参数传递给.index（）方法，则返回值是一个整数，表示jQuery对象中第一个元素相对于其兄弟元素的位置。

console.log($('li.pagination').index($('[data-page=5]')));

console.log($('li.pagination').index($('li.pagination[data-page=5]')));

console.log($('li.pagination[data-page=5]').index());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="pagination active" data-page="0"><a href="#">1</a></li>
<li class="pagination active" data-page="1"><a href="#">2</a></li>
<li class="pagination active" data-page="2"><a href="#">3</a></li>
<li class="pagination active" data-page="3"><a href="#">4</a></li>
<li class="pagination active" data-page="4"><a href="#">5</a></li>
<li class="pagination active" data-page="5"><a href="#">6</a></li>
<li class="pagination active" data-page="6"><a href="#">7</a></li>
<li class="pagination active" data-page="7"><a href="#">8</a></li>
<li class="pagination active" data-page="8"><a href="#">9</a></li>
<li class="pagination active" data-page="9"><a href="#">10</a></li>

jQuery让索引无法正常工作

1 个答案: