2011-02-08 8 views
0

注:これは、どのように質問するのではなく、より良い方法です。jQueryは最適な方法で特定のリンクをターゲットにしています

私はターゲットにしたいul内にいくつかのリンクを持っていますが、すべてのタグは1つではありません。私は各要素をIDでターゲットすることができますが、このタスクのベストプラクティス(最も最適化されたセルケッティング、最小のコード量)が何であるかを知りたいと思います。

$("#id").find("a").click(function(){ 
    //run function      
});  

マークアップ:

<nav id="id">  
    <ul> 
    <li id="want-01"><a href="#">link</a></li> 
    <li id="want-02"><a href="#">link</a></li> 
    <li id="want-03"><a href="#">link</a></li> 
    <li id="dont-want-01"><a href="#">link</a></li> 
    <li id="dont-want-02"><a href="#">link</a></li> 
    <li id="want-04"><a href="#">link</a></li> 
    <li id="want-05"><a href="#">link</a></li> 
    </ul>  
</nav> 

答えて

2

クラスの使用は、ここで適切と思われます。 'li_link'という新しいクラスを作成し、それをリンクするli要素に追加します。その後、クリックハンドラをそのクラスのすべての児童に適用します。

$('.li_link').click(function() {...}); 

動的に処理される要素を変更する場合は、ライブイベントの使用を検討することができます。これにより、li要素から 'li_link'クラスを追加したり削除したりすることができます。クリックハンドラはli要素に自動的に適用されるか、停止されます。

このようなものを使用ライブイベントを設定するには:本当に

$('.li_link').live('click', function() {...}); 
+0

、これは完全に働いた、ありがとうございます。 +1 – jeffreynolte

0

TheresのはHTMLでそれを行うための方法はありませんが、しかし、あなたは相対attrまたはクラスをimplmented場合は、かなり簡単にそれを選択することができます。

<nav id="id">  
    <ul> 
    <li id="want-01" rel="wanted"><a href="#">link</a></li> 
    <li id="want-02" rel="wanted"><a href="#">link</a></li> 
    <li id="want-03" rel="wanted"><a href="#">link</a></li> 
    <li id="dont-want-01"><a href="#">link</a></li> 
    <li id="dont-want-02"><a href="#">link</a></li> 
    <li id="want-04" rel="wanted"> <a href="#">link</a></li> 
    <li id="want-05" rel="wanted"><a href="#">link</a></li> 
    </ul>  
</nav> 

$("#id").find('li[rel=wanted]').children(); 
1
$("#id").find("a").not("#dont-want-01 a, #dont-want-02 a").click(function(){ 

}); 
関連する問題