CSS selector and jQuery eq() matching wrong elements

Question

I'm having an early morning issue with jQuery. The following code works on eq(1) or eq(0) but if I try putting it on eq(2) or eq(3) it just stops, as in it won't add the class to these elements at all, only eq(0) and eq(1).

Also, it seems to be preventing the default action on the children too, which shouldn't be happening. It should also be made clear that I am adding the class to certain <li>'s for a reason, please bear this in mind. This is why I need to add the class to eq 3 etc. Can anyone shed any light on the issue?

code:

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

fiddle - http://jsfiddle.net/andyjh07/6HAvV/

Answer 1

Your current code will remove the link from the 3^rd <li> selected from all of the <li>s (both parent and children) in the list because you are using the CSS descendent selector.

The ul#nav li will find every single <li>. Since you just want to remove the link default action from the first level (CSS children) then you can use the CSS child selector.

To remove the action from the top level parent <li>

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

Edit: Still using the child selector, this will only select the About Us link

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

Edit2: I was not entirely happy with needing multiple eq() selectors so how about using native CSS nth-child to select a range instead? This will be quicker in browsers that support nth-child natively.

Handy test page for this - http://nthmaster.com/

This should also just colour red (for demo purposes) Our Projects and About Us with the following code.

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

You may need to prevent click of only those lis that has ul inside it.

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

Fiddle