使用 jQuery 和 CSS 选择元素范围答案

【问题标题】：Selecting range of elements with jQuery and CSS使用 jQuery 和 CSS 选择元素范围
【发布时间】：2015-08-26 20:22:42
【问题描述】：

我正在尝试使用 nth-child 伪选择器选择一系列锚元素。问题是 nth-child 仅适用于子元素，但我有这样的结构：

<div>
  <a>first link>
</div>
<div>
  <a>Second link</a>
</div>
<div>
  <a>Third link</a>
</div>

在这种情况下，我发现对选择前 2 个匹配元素有用的以下选择器不起作用：

$("a:nth-child(n+1):nth-child(-n+2)")

我在这里创建了一个示例：http://jsfiddle.net/o6w5orom/，在第一个示例中，所有元素都返回而不是第一个 2。在第二个示例中，但仅适用于直接子级。

那么，有没有一种方法可以为 jQuery 构造 CSS 选择器，它基本上会返回一系列元素，比如 nth-child，但可以在 jQuery 对象的匹配元素上工作？我想构造选择器，不想写逻辑来处理一个jQuery对象。

【问题讨论】：

css-tricks.com/examples/nth-child-tester 可以帮忙吗？
@Phill 问题是如果所选元素不是子元素和兄弟元素，则 nth-child 不起作用，因此我正在寻找选择范围的替代方法。
jQuery.findInRange 使用简单如：$('parentEle').findInRange('selectorOne', 'selectorTwo');

【解决方案1】：

使用：$("div:nth-child(n+1):nth-child(-n+2) a")

选择带有nth-child 的div，然后下降到a 的

【讨论】：

【解决方案2】：

是的，你是对的 - :nth-child 只返回直接子级。但问题是什么？使用查找。

$("div:nth-child(n+1):nth-child(-n+2)").find('a')

【讨论】：