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

然而,它返回所有节点,任何建议赞赏!

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>