jQuery获取li元素中第一个链接

Question

我有以下的html代码：

<ul>
    <li>
        <a href="#">link 1</a>
        <ul>
            <li><a href="#">link 2</a></li>
            <li><a href="#">link 3</a></li>
            <li><a href="#">link 4</a></li>
        </ul>
    </li>
    <li>
        <a href="#">link 5</a>
        <ul>
            <li><a href="#">link 6</a></li>
            <li><a href="#">link 7</a></li>
            <li><a href="#">link 8</a></li>
        </ul>
    </li>
</ul>

我希望您能在jQuery中返回链接1和链接5。 我已经完成了如下步骤：

$('ul li a:first-child').each(function(e){
$(this).css('color','blue');
});

然而它返回所有节点，欢迎提供建议！

- poozerface

---

欢迎来到 StackOverflow，Poozerface！ - Sampson

Answer 1

获取所有立即列表项的立即链接

看起来你不仅仅想要“第一个和第五个”链接，而是想要主UL中立即列表项内的第一个链接。你的语法几乎正确。

$("ul.myList > li > a:first-child").css("color", "blue");

在这个例子中，> 表示直接关系。当我们说 > li 时，我们不是指在 UL 中的任何 LI，而是指直接的 li。链接也是同样的道理。

另外请注意，我在我的 UL 上使用了一个类名来区分它和其他 UL。如果我们不这样做，内部 UL 将被包含在此选择器中。

获取第一个和第五个元素，无论结构如何

记住 jQuery 使用基于零的索引（意味着第一个元素的索引为 0，第二个为索引 1 等），我们可以使用 :eq() 选择器来获取特定的索引。在这种情况下，我们想要 1 和 5，所以我们请求 0 和 4：

$("a:eq(0), a:eq(4)", "ul.myLinks").css("color", "blue");

选择器 ul.myLinks 的第二个参数是我们的上下文。我假设这些链接存在于一个类名为 "myLinks" 的无序列表中。

<ul class="myLinks">
  <li><a href="#0">I'm Blue!</a></li>     <!-- this will be blue -->
  <li><a href="#1">Foo</a></li>
  <li><a href="#2">Foo</a>
    <ul>
      <li><a href="#3">Foo</a></li>
      <li><a href="#4">I'm Blue!</a></li> <!-- this will be blue -->
  </li>
</ul>

- Sampson

Answer 2

我认为最简单的解决方案是给你的“主要”ul一个ID：

<ul id="myUl">
<li>
<a href="#">link 1</a>
<ul>
<li><a href="#">link 2</a></li>
[...]
</ul>
</li>
</ul>

然后将选择范围限制在直接子元素（使用 > 关键字）上，而不是任何后代元素：（参见此处）

$('#myUl > li > a').each(function(e){
$(this).css('color','blue');
});

- Wookai