jQueryでこれが "：lt"で動作しないのはなぜですか？

Question

私は最後のpのインデックスを把握しており、$('p:lt(_index)')を使用しても機能しません。番号で置き換えると動作します。どうして？

$(function() { 
 
    var _index = $('p:last').index(); 
 
    console.log(_index); 
 
    $('p:lt(_index)').css('color', 'red'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <p>1</p> 
 
    <p>12</p> 
 
    <p>123</p> 
 
    <p>1234</p> 
 
    <p>12345</p> 
 
    <p>123456</p> 
 
    <p>1234567</p> 
 
    <p>12345678</p> 
 
    <p>123456789</p> 
 
</div>

Answer 1

あなたは、変数の値を使用していない、:lt() pseudo-classの引数として文字列'_index'を使用しています。ライン：

$('p:lt(_index)').css('color','red'); 

は次のようになります。

$('p:lt(' + _index + ')').css('color','red'); 

$(function() { 
 
    var _index = $('p:last').index(); 
 
    console.log(_index); 
 
    $('p:lt(' + _index + ')').css('color', 'red'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <p>1</p> 
 
    <p>12</p> 
 
    <p>123</p> 
 
    <p>1234</p> 
 
    <p>12345</p> 
 
    <p>123456</p> 
 
    <p>1234567</p> 
 
    <p>12345678</p> 
 
    <p>123456789</p> 
 
</div>