3

我有一个关于 jQuery 的清晨问题。以下代码适用于eq(1)oreq(0)但如果我尝试将它放在上面eq(2)或eq(3)它只是停止，因为它根本不会将类添加到这些元素中，只有eq(0)and 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/

4

2 回答 2

1

您当前的代码将从列表中所有s（父母和孩子）中选择的第3 个中删除链接，因为您使用的是 CSS后代选择器。<li><li>

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

从顶级父级删除操作 <li>

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

编辑：仍然使用子选择器，这只会选择About Us链接

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

Edit2：我对需要多个选择器并不完全满意，eq()那么使用原生 CSSnth-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>
于 2013-04-11T07:43:04.950 回答
0

您可能只需要阻止点击其中包含的那些lis ul。

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

小提琴

于 2013-04-11T07:42:36.767 回答