JQuery prevendDefault [禁用链接] 列表内但不包括子列表中的链接

Question

我有一个想要禁用的链接。问题是它位于具有子列表的 li 中，因此它也禁用了这些链接。 HTML 看起来基本上是这样的:

<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>

我想禁用“li”类 secondaryLI 中的“a”，但不是所有伴随的 UL 子级。

我已经尝试过:

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

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

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

和

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

Answer 1

使用> selector仅选择直接子级。

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

或者，如果只有一个链接，请使用 :first selector .

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

或者更好的是，如果可以的话，给链接一个类或 ID，然后直接选择它。