jQuery切片负索引不起作用

Posted 2023-02-23

【中文标题】jQuery切片负索引不起作用

【英文标题】：jQuery slice negative index not working

【发布时间】：2017-03-17 03:46:46

【问题描述】：

我遇到了一个奇怪的问题，可能我在这里遗漏了一些东西。

我得到了一个元素列表，其中一部分是可见的，另一部分是不可见的。

我想选择不可见部分的最后 3 个元素。 我添加了一个片段来说明问题。

我正在寻找的结果是在 js 运行后显示 10、11、12，而不是 1、2、3 我以为slice(-3) 会给我数组的最后 3 个元素，但我似乎遗漏了一些东西。当我使用filter(':gt(-4)') 时也会出现同样的问题。 有人可以解释一下我做错了什么吗？

jQuery(document).ready(function() 
  setTimeout(function () 
    var prevs = jQuery('li').filter(':visible').first().prevAll();
    var vis = jQuery('li').filter(':visible');
    
    vis.hide(1000);
    prevs.slice(-3).show(1000);
    
  , 1000);
);

li:nth-last-child(n+4) 
  display: none


li 
  width: 30px;
  height: 30px;
  border: 1px dotted gray;
  background-color: red;
  list-style: none;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
</ul>

【参考方案1】：

问题是var prevs = jQuery('li').filter(':visible').first().prevAll();，具体来说是prevAll()。每 jquery documentation:

.prevAll() 方法在 DOM 树中搜索这些元素的前辈，并从匹配的元素中构造一个新的 jQuery 对象；元素按从最近的兄弟开始的顺序返回。

您返回的数组是元素 0-11，但它们的顺序相反。所以prevs[0] == 12。最后 3 个元素现在是 1、2 和 3。要解决此问题，您需要反转数组。只需将右手语句包装在Array.prototype.reverse.call() 中即可。我相信这就是你想要的

jQuery(document).ready(function() 
  setTimeout(function () 
    var prevs = Array.prototype.reverse.call(jQuery('li').filter(':visible').first().prevAll());
    var vis = jQuery('li').filter(':visible');
    
    vis.hide(1000);
    prevs.slice(-3).show(1000);
    
  , 1000);
);

li:nth-last-child(n+4) 
  display: none


li 
  width: 30px;
  height: 30px;
  border: 1px dotted gray;
  background-color: red;
  list-style: none;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
</ul>

【讨论】：

就在我把反向调用放在那里的时候剪掉了答案！这家伙明白了。

非常感谢，这完全有道理，我确实错过了 prevAll 的反转部分。