jQueryスライスの負のインデックスが機能しない

Question

私は奇妙な問題を抱えています。

要素のリストを取得しました。その要素の一部が表示され、もう1つは表示されません。

目に見えない部分の最後の3つの要素を選択します。 問題を説明するためにスナップを追加しました。

私が探していた結果は、jsが実行された後に表示されるのではなく、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>

Answer 1

問題は、具体的には、prevAll()var prevs = jQuery('li').filter(':visible').first().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>