Question

我早上遇到过jQuery问题。以下代码适用于eq(1)或eq(0)，但如果我尝试将其放在eq(2)或eq(3)上，它就会停止，因为它不会将类添加到这些元素只有eq(0)和eq(1)。

此外，它似乎也阻止了对儿童的默认行动，这不应该发生。还应该明确我将这个课程添加到某些<li>的原因中，请记住这一点。这就是为什么我需要将类添加到eq 3等等。任何人都可以解释这个问题吗？

代码：

$(document).ready(function(){
    $('ul#nav li:eq(2)').addClass('removeLink');
    $('.removeLink').click(function(e){
       e.preventDefault();
    });
});

小提琴 - http://jsfiddle.net/andyjh07/6HAvV/

Answer 1

您当前的代码将从<li>（父母和子女）的所有中选择的3 ^rd <li>中删除该链接在列表中，因为您使用的是CSS descendent selector。

ul#nav li会找到每一个<li>。由于您只想从第一级删除链接默认操作（CSS子级），因此您可以使用CSS child selector。

从顶级父级 <li>

中删除操作

$('ul#nav > li > a').click(function(e){
   e.preventDefault();
});

修改：仍在使用子选择器，仅选择About Us链接

$('ul#nav > li:eq(2) > a')

Edit2：我对需要多个eq()选择器感到非常满意，那么如何使用原生CSS nth-child来选择范围呢？在本机支持nth-child的浏览器中，这会更快。

方便的测试页面 - http://nthmaster.com/

这也应该使用以下代码为红色（用于演示目的）Our Projects和About Us着色。

<强> CSS

$('#nav > li:nth-child(n+2):nth-child(-n+3) > a').css({color: 'red'})

<强> HTML

<ul id="nav">
    li class=""><a href="home.htm">Home</a></li>
    <li class="nav_parent"><a href="our-projects.htm">Our Projects</a>
        <ul class="nav_child">
            <li class=""><a href="the-palms-at-corozal.htm">The Palms At Corozal</a></li>
            <li class=""><a href="the-lakes-at-consejo.htm">The Lakes At Consejo</a></li>
        </ul>
    </li>
    <li class="nav_parent"><a href="about-us.htm">About Us</a>
        <ul class="nav_child">
            <li class=""><a href="who-we-are.htm">Who We Are</a></li>
            <li class=""><a href="other-projects.htm">Other Projects</a></li>
            <li class=""><a href="partners.htm">Partners</a></li>
        </ul>
    </li>
    <li class="nav_parent"><a href="about-belize.htm">About Belize</a>
        <ul class="nav_child">
            <li class=""><a href="general-info.htm">General Info</a></li>
            <li class=""><a href="investing-in-belize.htm">Investing In Belize</a></li>
            <li class=""><a href="useful-links.htm">Useful Links</a></li>
        </ul>
    </li>
    <li class=""><a href="news.htm">News Articles</a></li>
    <li class=""><a href="contact-us.htm">Contact Us</a></li>
</ul>

Answer 2

您可能需要阻止仅点击其中包含li的{{1}}个。{/ p>

ul

Fiddle

CSS选择器和jQuery eq（）匹配错误的元素

2 个答案: