Question

I’ve got a link I want to disable. Problem is it’s in an li that has a sublist so it also disables those links. The HTML looks basically like this:

<div id="main">
<ul class="index"><li class="firstLI"><a href="some other URL"></a></li>

<li class="secondLI"><a href="disableMe">Disable this Link</a>
   <ul>
        <li><a href="dontDisableMe">Don't Disable Me</a></li>
        <li><a href="dontDisableMe">Don't Disable Me</a></li>
   </ul>
</li>
<li>third</li></ul>
</div>

I want to disable the ‘a’ within the ‘li’ class secondLI but not all of the accompanying UL’s children.

I’ve tried:

function preventDefault(e) {
        e.preventDefault()};

    $("#main li:nth-child(2) a").bind("click", preventDefault);

    $(".secondLI").unbind("click", prevenDefault);

and

$("#main li:nth-child(2) a").click(function(e) {
    e.preventDefault();
    //do other stuff when a click happens
});

Answer 1

Use the > selector that selects only the direct children.

$("#main li:nth-child(4) > a").click(function(e) { ...

Alternatively, if there’s only one link use the :first selector.

$("#main li:nth-child(4) a:first").click(function(e) { ...

Or even better, give the link a class or an id if you can and select it directly.