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');
});

然而，它返回所有节点，任何建议赞赏！

Answer 1

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

您似乎并不只是想要“第一个和第五个”链接，而是主UL的直接列表项中的第一个链接。你的语法几乎是正确的。

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

在此示例中，＆gt;表示即时性。当我们说> 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>

Answer 2

我认为最简单的解决方案是为您的“主要”ul提供ID：

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

然后将您的选择限制为直接子(with the > keyword)而不是任何后代：

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

jQuery首先获得li元素的链接

2 个答案:

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

获得第一和第五，无论结构