jquery - 小于选择器

Question

我有以下代码:

$(function() {
    $('li:lt(5)').css("background", "red");
});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<div id="listes">
    <ul id="ul1">
        <li>
            Element de liste 1
            <ul id="ul2">
                <li>Enfant 1</li>
                <li>Enfant 2</li>
            </ul>
        </li>
        <li>Element de liste 2</li>
        <li>Element de liste 3</li>
        <li>Element de liste 4</li>
    </ul>
</div>

我希望最后 2 li 保持完整，但只有最后一个完好无损。

(来自文档::lt() 选择器选择索引小于匹配集中索引的所有元素。)

这种行为背后的原因是什么？

Answer 1

该索引从零开始。要选择前五个元素，请使用

$('li:lt(4)')

来自 :lt() selector 的 jQuery 文档:^{(重点是我的)}

indexFromEnd: Zero-based index, counting backwards from the last element.

Note that since JavaScript arrays use 0-based indexing, these selectors reflect that fact. This is why $( ".myclass:lt(1)" ) selects the first element in the document with the class myclass, rather than selecting no elements. In contrast, :nth-child(n) uses 1-based indexing to conform to the CSS specification.

$(function() {
  $('li:lt(4)').css("background", "red");
});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<div id="listes">
  <ul id="ul1">
    <li>
      Element de liste 1
      <ul id="ul2">
        <li>Enfant 1</li>
        <li>Enfant 2</li>
      </ul>
    </li>
    <li>Element de liste 2</li>
    <li>Element de liste 3</li>
    <li>Element de liste 4</li>
  </ul>
</div>