jQueryセレクタがリスト要素内のすべてのアンカーを選択するのはなぜですか？

Question

このシンプルなセレクターの問題は数時間で苦労しており、明らかに何かが欠けているはずです。私は<ul>を持っていて、<li>のいくつかは入れ子になっています。<ul> sです。各<li>にはリンクが含まれていますが、これをクリックすると（ナビゲートするのではなく）機能を実行したいのですが、重要なのは、親の<ul>に含まれるリンクでのみ起こり、ネストされた<ul>のリンクはありません。

HTML：：

<ul> 
    <li> 
     <a href="dontleavethis.page">A link</a> 
     <ul> 
      <li><a href="navigate.there">A nested link</a></li> 
      <li><a href="navigate.somewhere">Another nested link</a></li> 
     </ul> 
    </li> 
</ul> 

のjQuery：

$('li:has(ul) a').click(function() { 
    bla bla bla... 
    return false; 
}); 

事が、どんなに私フレーズ私のセレクタ、私はトリガーから、ネストされた<ul>内のリンクを止めることはできませんされ、簡単なあなたは思うだろうクリックハンドラそれらは明らかにセレクタの":has(ul)"基準に一致しませんが、何らかの理由でハンドラがまだ接続されています。私はここで間違って何をしていますか？

Answer 1

$('li:has(ul) > a').click(...) 

あなたの問題は$('li:has(ul) a')がlihasそのul、だけでなく、直接の子の内側すべてaの要素を意味していることです。

Answer 2

$('ul > li:has(ul) > a').click(function(){ 
    bla bla bla.... 
    return false; 
}); 

Answer 3

トップレベルのリンクにクラスを与えると、複雑な（ish）セレクタロジックを必要とせずに直接アクセスできます。

Answer 4

あなたはメインのulにIDを渡すべきです、私は "メイン"を使用しますが、あなた自身の利益のために、より記述的なものを考えてみるべきです。次に、あなただけの要素の唯一の直接の祖先を選択します

$('ul#main > li > a').click(function() { 
    bla bla bla... 
    return false; 
}); 

>を使用することができます。

-edit- これはulがないと李がスタイルを持つことを意味しません。 @ idrumgoodのソリューションが最適です。

Answer 5

イベントが伝播する可能性がありますか？

方法について

$('ul > li:has(ul) > a').click(function(event){ 
    bla bla bla.... 
    event.stopPropagation(); 
    return false; 
});