0

我正在尝试从重复的 HTML 结构中选择 3 个现有a元素中的 2 个，并且在设计高效的 jquery 选择器时遇到了麻烦。

这是标记。我正在尝试选择Link 1, Link 2，但不是Link 3。请注意，整个 HTML 结构 ( div.container) 可能会出现多次。如果是这样，我需要所有container班级的链接 1 和链接 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");

用详细的语言，我想“选择class中不包含在 class 中的所有a标签。这可能吗？或者上面使用 2 个 CSS 路径的选择器是最佳选择。containerright

测试小提琴。

4

2 回答 2

3

尝试如下，

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

演示

在此问题范围之外有一个单独的选择器，然后将其与此问题的选择器结合使用。假设 $('.myOtherSelector, .selectorFromThisQuestion'); 所以我希望这个解决方案只是一个选择器。否则我可以使用 $('.container').find('a:lt(2)').add('.myOtherSelector') 来组合它们，但正如您所看到的，第一个选项要简单得多。正如我所说，如果无法完成，我肯定会使用您的解决方案/标记作为答案。我只是对是否可以使用直接选择器感兴趣。

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

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

演示

于 2012-05-29T14:49:14.730 回答
2

使用:not选择器，如下：

$(".container a:not('.right a')")
于 2012-05-29T15:47:51.547 回答