slice()与:gt:lt不一样吗?

Question

我对此有点好奇。我认为slice()和:gt:lt差不多但这里有一个例子在jsfiddle

可以看到绿色背景并不适用于.nr4。为什么是这样，什么时候正确使用slice()而不是:gt:lt ?

$(document).ready(function () {
    $('.nr1 li').slice(2, 5).css('background', 'red');
    $('.nr2 li:gt(1):lt(3)').css('background', 'blue');
    //$('ul:gt(1)').find('li:gt(2)').css('background', 'purple');
    $('ul').slice(2, 4).find('li:lt(2)').css('background', 'yellow'); // .nr3 and .nr4 has a yellow background
    $('ul').slice(2, 4).find('li').slice(4, 6).css('background', 'green'); // .nr3 has green background but .nr4 does not
});

Answer 1

.find在之前的结果($('ul').slice(2, 4))上执行，并使用其标准(选择上下文的后代)分析结果中的每个元素，为每个元素开始一个新的索引计数。

.find('li:lt(2)'):

ul2 (li1 li2 li3 li4 li5 li6)
ul2 (li1 li2 li3 li4 li5 li6)

而.find('li')首先返回所有12项的结果

li1 li2 li3 li4 li5 li6
li7 li8 li9 li10 li11 li12

和.slice(4, 6)对整个集合执行，因此返回第一行(或在您的示例中是第三行)的最后3项

如果你使用.slice(6, 8)，你会看到最后一行的前2块将被涂成绿色。

另一个例子:使用$('ul').find('li:first').css('background', 'yellow');，每行的第一个块将被着色。但是对于$('ul li:first').css('background', 'yellow');，只有第一行的块会被着色，因为索引将根据所有li s的总和来确定

注意:这些只是观察，不能真正找到一个很好的参考，这是预期的行为，我只是假设它是。