jquery - 链接 jQuery 选择器 :lt 和 :gt

Question

我有一个超过 9 行的表。

如果我这样做 : $('table tr:gt(3):lt(6)')，最后我会收到 3 个还是 6 个元素，为什么？是所有选择器都应用于同一个主选区，还是依次应用于不同的选区？

Answer 1

它们是按顺序应用的，因此首先您将过滤掉前四个元素 ( )，然后过滤掉已过滤集合:gt(3)的第六个 ( ) 元素之后的所有元素。:lt(6)

想象一下这个 HTML：

<br/><br/>
<br/><br/>
<br/><br/>
<br/><br/>
<br/><br/>
<br/><br/>

然后执行以下 jQuery：

$('br:gt(3):lt(6)').addClass('sel');

您现在将拥有：

<br/><br/>
<br/><br/>
<br class="sel"/><br class="sel"/>
<br class="sel"/><br class="sel"/>
<br class="sel"/><br class="sel"/>
<br/><br/>

Answer 2

我建议您改用 slice() 方法。

http://docs.jquery.com/Traversing/slice#startend

$('table tr').slice(2, 5).addClass("something");

Answer 3

不是你想的那样——

工作演示

基本上，第二个过滤器按顺序应用于第一个过滤器的匹配集。

例如，在有 10 行的表上，:gt(3)将过滤到元素 5 - 10，然后:lt(6)将应用于 6 个元素，而不过滤任何元素。

如果您将/edit添加到演示 URL，您可以使用选择器并亲自查看。如果将第二个过滤器更改为:lt(2)，则第 5 行和第 6 行以红色突出显示

Answer 4

由于某种原因:lt(6)，该选择将被忽略，因此它将在此实例中返回大于 3 的所有内容。

但是，如果您切换它，它将按预期工作

$('table tr:lt(6):gt(3)')

将返回 2 行（只有第 4 行和第 5 行介于 6 和 3 之间）。

**编辑：**使用 v.1.3.2

而且，lt(6)不会被忽视，不仅仅是像我预期的那样工作。所以:gt(3):lt(6)实际上会返回 6 个元素（如果你有足够的行，那就是）