JQuery 从重复的 html 结构中选择 3 个链接中的 2 个

Question

我试图从重复的 HTML 结构中选择 3 个现有 a 元素中的 2 个，但在设计高效的 jquery 选择器时遇到了问题。

这是标记。我正在尝试选择 Link 1、Link 2，而不是 Link 3。请注意，整个 HTML 结构 (div.container) 可能会出现多次。如果是这样，我需要所有 container 类中的 Link 1 和 Link 2。

注意 1:我无法修改标记。

注意 2:我希望解决方案完全基于选择器(并避免调用 .find() 等，因为此选择器必须与外部的另一个选择器组合这个问题的范围。

<div class="container">
    <h1>
        <a href="http://www.google.ca">Link 1</a>
    </h1>
    <div>
        <div class="left">
            <p>
                <a href="http://www.google.ca">Link 2</a>
            </p>
        </div>
        <div class="right">
            <a href="http://www.google.ca">Link 3</a>
        </div>
    </div>
</div>

当出现单个container结构时，一个简单的选择器是:

$(".container a:lt(2)");

但是如果存在多个container结构，上面只会从第一个容器中选择Link 1和Link 2。

以下适用于一个或多个 container 结构，但我不喜欢它。设置多个 css 路径选择器似乎效率低下。

$(".container h1 a, .container .left a");

在冗长的语言中，我想“选择 container 类中不包含在 right 类中的所有 a 标签。这可能吗？或者上面的选择器使用 2 个 CSS 路径是最好的选择。

Test Fiddle.

Answer 1

像下面这样尝试，

$(".container").find("a:lt(2)")

DEMO

have a separate selector outside the scope of this question, which is then combined with the selector from this question. Let's say $('.myOtherSelector, .selectorFromThisQuestion'); so I'd prefer this solution be a selector only. I can otherwise do $('.container').find('a:lt(2)').add('.myOtherSelector') to combine them but as you can see the first option is much simpler. As I said if it can't be done, I'll definitely use your solution/mark as answer. I'm just interested whether a straight selector can be used.

或者，作为一种解决方法，如果您希望在一行中使用它，您可以像下面这样尝试。请注意，这仅适用于提供的标记。 任何标记更改都会破坏代码。

$(".container :nth-child(1) a").css('background-color','red');

DEMO