爲什麼這個「：lt」在jQuery中不起作用？

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

您正在使用的字符串'_index'作爲:lt() pseudo-class的說法，不使用變量的值。行：

$('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>