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保持不变，但只有最后一个。{/ p>

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

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

Answer 1

指数从零开始。要选择前五个元素，请使用

$('li:lt(4)')

来自:lt() selector的jQuery文档：^{（强调是我的）}

indexFromEnd：从零开始的索引，从最后一个元素向后计数。

请注意，由于 JavaScript数组使用基于0的索引，因此这些选择器反映了这一事实。这就是为什么$( ".myclass:lt(1)" )选择具有类myclass的文档中的第一个元素，而不是选择任何元素。相反，:nth-child(n)使用基于1的索引来符合CSS规范。

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

小于选择器

1 个答案: